Vue3中computed计算属性函数

目标：现在vue3的使用越来越普遍了，vue3这方面的学习我们要赶上，今天说一下vue3中computed计算属性的使用。

computed函数在vue2中我们都了解过，当我们需要一个值，这个值随着其他值变化而变化，我们就将其放进computed中，computed是用来定义计算属性的。

1. 基本使用：只读

<template><div><div>计算属性</div><hr><button @click='age=25'>点击</button><div>今年：{{age}}岁了</div><div>明年：{{nextAge}}岁了</div></div>
</template><script>
import { ref, computed } from 'vue'export default {name: 'App',setup () {// 计算属性：简化模板// 应用场景：基于已有的数据，计算一种数据const age = ref(18)// 计算属性基本使用const nextAge = computed(() => {// 回调函数必须return，结果就是计算的结果// 如果计算属性依赖的数据发生变化，那么会重新计算return age.value + 1})return { age, nextAge }}
}
</script><style lang="less">
</style>

总结：Vue3中计算属性也是组合API风格

1. 回调函数必须return，结果就是计算的结果
2. 如果计算属性依赖的数据发生变化，那么会重新计算
3. 不要在计算中中进行异步操作

2. 高级用法：可读可写

<template><div><div>计算属性</div><hr><button @click='age=25'>点击</button><button @click='nextAge=28'>点击修改</button><div>今年：{{age}}岁了</div><div>明年：{{nextAge}}岁了</div></div>
</template><script>
import { ref, computed } from 'vue'export default {name: 'App',setup () {// 计算属性：简化模板// 应用场景：基于已有的数据，计算一种数据const age = ref(18)// // 计算属性基本使用// const nextAge = computed(() => {//   // 回调函数必须return，结果就是计算的结果//   // 如果计算属性依赖的数据发生变化，那么会重新计算//   return age.value + 1// })// 修改计算属性的值const nextAge = computed({get () {// 如果读取计算属性的值，默认调用get方法return age.value + 1},set (v) {// v是计算属性下传递的实参// 如果要想修改计算属性的值，默认调用set方法age.value = v - 1}})return { age, nextAge }}
}
</script><style lang="less">
</style>

总结：

1. 计算属性可以直接读取或者修改
2. 如果要实现计算属性的修改操作，那么computed的实参应该是对象
3. 读取数据触发get方法
4. 修改数据触发set方法，set函数的形参就是你赋给他的值