vue实现computed
在 Vue 中实现 computed
Vue 的 computed 属性用于声明基于其他响应式数据的计算属性，它会自动缓存计算结果，仅在依赖项变化时重新计算。以下是如何在 Vue 2 和 Vue 3 中实现 computed 的示例。
Vue 2 中的 computed
在 Vue 2 中，computed 通常在组件的选项中定义：
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`
}
}
}说明：
fullName是一个计算属性，依赖firstName和lastName。- 当
firstName或lastName变化时，fullName会自动更新。 - 计算结果会被缓存，避免重复计算。
Vue 3 中的 computed
在 Vue 3 中，可以使用 setup 函数和 computed 函数实现计算属性：
import { ref, computed } from 'vue'
export default {
setup() {
const firstName = ref('John')
const lastName = ref('Doe')
const fullName = computed(() => {
return `${firstName.value} ${lastName.value}`
})
return { firstName, lastName, fullName }
}
}说明：
- 使用
ref或reactive创建响应式数据。 - 通过
computed函数定义计算属性，传入一个 getter 函数。 - 计算属性同样具有缓存特性。
计算属性的 setter
如果需要设置计算属性的值，可以提供一个 setter：
computed: {
fullName: {
get() {
return `${this.firstName} ${this.lastName}`
},
set(newValue) {
const [first, last] = newValue.split(' ')
this.firstName = first
this.lastName = last
}
}
}说明：
get方法用于获取计算属性的值。set方法在赋值时触发，可以更新依赖的数据。
计算属性 vs 方法
计算属性和方法的区别在于缓存：
- 计算属性：基于依赖缓存，适合性能敏感的场景。
- 方法：每次调用都会重新计算，适合需要动态结果的场景。
methods: {
getFullName() {
return `${this.firstName} ${this.lastName}`
}
}注意事项
- 避免在计算属性中执行异步操作或副作用（如修改 DOM）。
- 计算属性应保持纯函数特性，仅依赖响应式数据。
- 在 Vue 3 中，
computed返回的是一个ref对象，需要通过.value访问其值。
