vue3 基础-API-computed
前些章节讲了一些常用的 api 如 setup, ref, reactive, toRef ... 等, 并以一个 todoList 的小案例来体现在 vue3 中如何进行解耦逻辑, 以 setup 函数作为调度的这种后端编程思想. 其实我个人觉得没啥, 就比较符合大众的编程习惯而已啦. 本篇继续来介绍计算属性 computed 是如何在 api 中应用的.
computed 的简单使用
<!DOCTYPE html>
<html lang="en">
<head>
<title>computed</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
// computed 计算属性
const app = Vue.createApp({
setup () {
const { ref, computed } = Vue
const count = ref(0)
const dealClick = () => {
count.value += 1
}
// 其实就是定义一个变量, 给它写上逻辑, 自动计算啦
const countAddFive = computed(() => {
return count.value + 5
})
return { count, countAddFive, dealClick }
},
template: `
<div>
<span @click="dealClick">{{count}}</span> -- {{countAddFive}}
</div>
`,
})
const vm = app.mount('#root')
</script>
</body>
</html>
对简单的 computed 的使用流程则是:
- 从 vue 中引入 computed
- 定义一个属性变量 = computed(( ) => { 逻辑 })
- return 该属性变量即可在 template 中使用啦
更复杂的一些用法, 则是能在 computed 的函数中去传入对象的操作, 如设置 get 和 set 的方法.
<!DOCTYPE html>
<html lang="en">
<head>
<title>computed</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
// computed 计算属性
const app = Vue.createApp({
setup () {
const { ref, computed } = Vue
const count = ref(0)
const dealClick = () => {
count.value += 1
}
// 传入一个对象, 编写 get 和 set 的方法
let countAddFive = computed({
get: () => {
return count.value + 5
},
set: () => {
count.value = 666
}
})
setTimeout(() => {
countAddFive.value = 111
}, 3000);
return { count, countAddFive, dealClick }
},
template: `
<div>
<span @click="dealClick">{{count}}</span> -- {{countAddFive}}
</div>
`,
})
const vm = app.mount('#root')
</script>
</body>
</html>
set 方法当值发生变化时候就会自动调用, 然后 get 方法则再进行处理啦. 总之在这个 computed 的使用, 在通过 api 的方式也是非常简单的, 这里就不在探索啦, 咱只要知道它的基本使用流程就行, 在实际应用中还是能用到的, 比如算根据单价和数量, 自动算营业额呀, 算打分呀这些场景, 用 computed 则会让 code 看起来非常清晰和优雅呢.
vue3 基础-API-computed的更多相关文章
- Vue3全局APi解析-源码学习
本文章共5314字,预计阅读时间5-15分钟. 前言 不知不觉Vue-next的版本已经来到了3.1.2,最近对照着源码学习Vue3的全局Api,边学习边整理了下来,希望可以和大家一起进步. 我们以官 ...
- vue3组合式API
vue3组合式API 为什么要用组合式API,我们来看看它是如何解决vue2的局限性的 1.vue2的局限性 当组件内容越来越多,逻辑越来越复杂,可读性就会降低,并且难以维护. vue2组件采用配置式 ...
- vue3组合式API介绍
为什么要使用Composition API? 根据官方的说法,vue3.0的变化包括性能上的改进.更小的 bundle 体积.对 TypeScript 更好的支持.用于处理大规模用例的全新 API,全 ...
- Linux高性能server编程——Linux网络基础API及应用
Linux网络编程基础API 具体介绍了socket地址意义极其API,在介绍数据读写API部分引入一个有关带外数据发送和接收的程序,最后还介绍了其它一些辅助API. socket地址API 主 ...
- 服务器编程入门（4）Linux网络编程基础API
问题聚焦: 这节介绍的不仅是网络编程的几个API 更重要的是,探讨了Linux网络编程基础API与内核中TCP/IP协议族之间的关系. 这节主要介绍三个方面的内容:套接字( ...
- Linux 高性能服务器编程——Linux网络编程基础API
问题聚焦: 这节介绍的不仅是网络编程的几个API 更重要的是,探讨了Linux网络编程基础API与内核中TCP/IP协议族之间的关系. 这节主要介绍三个方面的内容:套接字(so ...
- Android BLE与终端通信（一）——Android Bluetooth基础API以及简单使用获取本地蓝牙名称地址
Android BLE与终端通信(一)--Android Bluetooth基础API以及简单使用获取本地蓝牙名称地址 Hello,工作需要,也必须开始向BLE方向学习了,公司的核心技术就是BLE终端 ...
- SVG 学习<四> 基础API
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- mongoose 基础api 图表整理
一.背景 今天看 mongoose 的基础 API,参考了下面的链接做了图表以供查阅. 参考资料: http://www.cnblogs.com/xiaohuochai/p/7215067.html ...
- React实例入门教程(1)基础API,JSX语法--hello world
前 言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发 ...
随机推荐
- Java8 使用 stream().filter()过滤List对象等各种操作
内容简介 本文主要说明在Java8及以上版本中,使用stream().filter()来过滤一个List对象,查找符合条件的对象集合. list.stream().mapToDouble(User:: ...
- Qt QString的格式化与QString的拼接
1. QString 与 QString 直接用 + 号也可以 QString date = "昨晚"; QString msg = "你真棒": QStrin ...
- 终于写完轮子一部分：tcp代理 了，记录一下
24年终自己立了flag: 25年做些轮子玩(用于浪费生命,赚不了钱) 所以25年就准备用c#写一个网络代理NZOrz(nginx知道吧,就那玩意儿干的事),包含 udp/tcp/http1 2 3, ...
- @SpringBootApplication自动配置原理
@EnableAutoConfiguration 是核心,他会调用一个@Import注解.我们已知Import自动配置得实现是通过创建ImportSelector 接口的实现类并重写里面selectI ...
- xpath 定位表格里面内容
向上找页面唯一元素,依次为: 表格体/第一行/第14列 实现代码 Xpath==//tbody/tr[1]/td[11]
- `go install`指令行为分析
分析go install [build flags] [packages]指令做了什么,如何实现安装GO软件,我们如何编写一个软件使得可以使用该指令安装自己编写的程序. 参考go官方文档 安装位置 $ ...
- JMeter 线程编号 __threadNum 获取不到
场景: 在 BeanShell PreProcessor 中,使用 vars.get("__threadNum") 获取不到当前线程数,如: import org.apache.j ...
- 工作面试必备：SQL 中的各种连接 JOIN 的区别总结！
前言 尽管大多数开发者在日常工作中经常用到Join操作,如Inner Join.Left Join.Right Join等,但在面对特定查询需求时,选择哪种Join类型以及如何使用On和Where子句 ...
- 编写你的第一个 Django 应用程序，第6部分
本教程从教程 5 停止的地方开始.我们已经构建了一个经过测试的网络投票应用程序,现在我们将添加一个样式表和一个图像. 除了服务器生成的 HTML 之外,Web 应用程序通常需要提供呈现完整网页所需的其 ...
- 如何在 PostgreSQL 中运行 TLS 回归测试
概述 本文将分享一个简单的步骤,介绍如何在 PostgreSQL 中运行 SSL/TLS 回归测试. Postgres 回归测试 每当我们想要添加新功能或进行修复时,都应该运行 PostgreSQL ...