vue组件实现computed
Vue 组件中实现 computed 的方法
在 Vue 组件中，computed 用于声明计算属性，根据依赖的响应式数据动态计算并返回结果。计算属性具有缓存机制，只有当依赖的数据发生变化时才会重新计算。
基本语法：
export default {
computed: {
propertyName() {
// 计算逻辑
return this.dependencyData + ' processed';
}
}
}示例：计算商品总价
export default {
data() {
return {
items: [
{ name: 'Apple', price: 10 },
{ name: 'Banana', price: 5 }
]
}
},
computed: {
totalPrice() {
return this.items.reduce((sum, item) => sum + item.price, 0);
}
}
}计算属性与方法的区别
计算属性是基于它们的依赖进行缓存的，只有在依赖发生改变时才会重新求值。而方法每次调用都会执行函数。
方法示例：
methods: {
getTotalPrice() {
return this.items.reduce((sum, item) => sum + item.price, 0);
}
}计算属性的 setter
计算属性默认只有 getter，但也可以提供 setter。
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];
}
}
}在模板中使用计算属性
计算属性可以像普通属性一样在模板中使用。
模板示例：
<template>
<div>
<p>Total Price: {{ totalPrice }}</p>
</div>
</template>计算属性的依赖追踪
计算属性会自动追踪响应式依赖，当依赖变化时会重新计算。
依赖变化示例：
computed: {
reversedMessage() {
return this.message.split('').reverse().join('');
}
}当 message 变化时，reversedMessage 会自动更新。
计算属性的性能优化
由于计算属性会缓存结果，对于复杂计算或频繁访问的数据，使用计算属性比方法更高效。
性能优化示例：
computed: {
filteredItems() {
return this.items.filter(item => item.price > 5);
}
}计算属性与 watch 的区别
计算属性适合基于多个数据计算一个值的情况，而 watch 适合在数据变化时执行异步或开销较大的操作。
watch 示例：
watch: {
message(newVal, oldVal) {
console.log('Message changed from', oldVal, 'to', newVal);
}
}
