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
方法。 - 计算属性函数体中不应包含逻辑分支和异步操作