vue计算属性 实现
Vue 计算属性的实现
计算属性（Computed Properties）是 Vue 中的一个核心功能，用于声明式地定义依赖其他属性的值。计算属性会缓存结果，只有当依赖的响应式数据发生变化时才会重新计算。
基本语法
在 Vue 组件中，计算属性通过 computed 选项定义：
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`
}
}
}计算属性 vs 方法
计算属性与方法的主要区别在于缓存机制：
- 计算属性：基于依赖缓存，只有依赖变化时才重新计算
- 方法：每次调用都会执行函数
methods: {
getFullName() {
return `${this.firstName} ${this.lastName}`
}
}
// 每次调用 this.getFullName() 都会执行计算属性的 setter
计算属性默认只有 getter，但也可以提供 setter：
computed: {
fullName: {
get() {
return `${this.firstName} ${this.lastName}`
},
set(newValue) {
const names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}计算属性的实现原理
Vue 的计算属性底层基于响应式系统实现：
- 初始化时收集依赖
- 创建计算属性的 watcher
- 访问计算属性时触发 getter
- 依赖变化时触发重新计算
最佳实践
- 将复杂逻辑封装在计算属性中
- 避免在计算属性中产生副作用
- 对于不依赖响应式数据的复杂计算，考虑使用方法替代
示例：购物车总价计算
computed: {
totalPrice() {
return this.items.reduce((sum, item) => sum + item.price * item.quantity, 0)
}
}计算属性是 Vue 中优化性能的重要工具，合理使用可以显著提高应用效率。
