Vue3 计算属性
Vue3 计算属性
在Vue3中，计算属性是一个非常重要的概念。计算属性是一个可以根据依赖进行计算得出结果的属性，类似于计算机中的函数。
计算属性的基本用法
计算属性定义在Vue实例中的computed选项中。计算属性的基本结构如下：
const app = Vue.createApp({
data() {
return {
a: 1,
b: 2
}
},
computed: {
// 声明计算属性
sum() {
return this.a + this.b
}
}
})
上面的代码中sum就是一个计算属性，它使用this.a + this.b来计算得出最终的结果。在Vue模板中就可以直接使用计算属性sum的值，而无需手动调用计算属性的方法。
<!-- Vue 模板中使用计算属性 -->
<div>{{ sum }}</div>
计算属性的缓存
计算属性默认会缓存计算结果，只有在计算属性的依赖发生变化时，才会重新计算。这个特性可以有效地优化性能。
const app = Vue.createApp({
data() {
return {
a: 1,
b: 2,
c: 3
}
},
computed: {
// 声明计算属性
sum() {
console.log('sum called')
return this.a + this.b
},
// 声明计算属性
total() {
console.log('total called')
return this.sum + this.c
}
}
})
上面代码中，我们在计算属性的函数体中打印了一条信息。我们先输出一下total的值，再修改a的值，再输出一下total的值。结果显示sum called只被输出了一次，说明计算属性的结果被缓存了。只有在依赖sum发生变化时，才会重新计算total的值。
console.log(app.total) // 输出 'total called' 和 6
app.a = 4
console.log(app.total) // 只输出 9，没有输出 'sum called'，说明 sum 的计算结果被缓存了
计算属性的Setter
计算属性除了可以直接获取值，还可以通过Setter方法实现给计算属性赋值。
const app = Vue.createApp({
data() {
return {
a: 1,
b: 2
}
},
computed: {
// 声明计算属性
sum: {
get() {
return this.a + this.b
},
set(val) {
this.b = val - this.a
}
}
}
})
上面的代码中，我们在计算属性的声明中使用了一个getter和setter，这个计算属性可以实现给sum赋值。当对sum赋值时，setter方法会被调用，这里实现了b的值为总值和a的差。
app.sum = 10
console.log(app.b) // 输出 9 （10 - 1）
计算属性的注意事项
计算属性没有set方法，所以计算属性是只读的。如果需要写入的话，可以使用一个getter方法和一个setter方法。
如果一个计算属性只有getter方法而没有setter方法，那么这个计算属性是只读的。如果在代码中尝试给一个只读的计算属性赋值，会切换到Vue的严格模式中。
在Vue3中，计算属性的函数体中不应包含逻辑分支和异步操作，因为这些操作会导致计算属性结果的不稳定，从而影响计算属性缓存的效果。
总结
- 计算属性是一个可以根据依赖进行计算得出结果的属性
- 计算属性定义在Vue实例中的
computed选项中 - 计算属性默认会缓存计算结果，只有在计算属性的依赖发生变化时才会重新计算
- 计算属性的Setter方法可以实现给计算属性赋值
- 计算属性没有
set方法，如果需要写入需要使用一个getter和一个setter方法。 - 计算属性函数体中不应包含逻辑分支和异步操作