vue computed实现
Vue 计算属性（computed）实现
计算属性（computed）是 Vue 中用于处理复杂逻辑的响应式属性，它会基于依赖的响应式数据自动缓存计算结果。以下是实现计算属性的方法和注意事项。
基本语法
计算属性通过 computed 选项定义，可以是一个函数或包含 get 和 set 的对象。
new Vue({
data: {
firstName: 'John',
lastName: 'Doe'
},
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName;
}
}
});计算属性 vs 方法
计算属性基于依赖缓存，只有在依赖变化时才会重新计算。方法（methods）则每次调用都会执行。
// 计算属性
computed: {
reversedMessage: function() {
return this.message.split('').reverse().join('');
}
}
// 方法
methods: {
reverseMessage: function() {
return this.message.split('').reverse().join('');
}
}计算属性的 setter
计算属性默认只有 getter，但可以通过对象形式定义 setter。
computed: {
fullName: {
get: function() {
return this.firstName + ' ' + this.lastName;
},
set: function(newValue) {
const names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}依赖追踪
计算属性会追踪所有依赖的响应式数据，并在依赖变化时自动更新。如果依赖未变化，计算属性会直接返回缓存值。
computed: {
now: function() {
return Date.now(); // 不会更新，因为不依赖任何响应式数据
}
}使用场景
计算属性适合处理需要复杂逻辑或频繁计算的场景，例如过滤列表、格式化数据等。
computed: {
filteredTodos: function() {
return this.todos.filter(todo => !todo.completed);
}
}注意事项
- 避免在计算属性中执行异步操作或副作用（如修改 DOM）。
- 计算属性应保持纯函数特性，依赖明确且无副作用。
- 对于不需要缓存的逻辑，可以使用方法（methods）替代。
计算属性是 Vue 响应式系统的核心特性之一，合理使用可以显著提升应用性能和可维护性。
