vue computed实现
Vue 中 computed 的实现
在 Vue 中，computed 是一种基于依赖关系缓存的属性，用于处理复杂逻辑或依赖其他数据的变化。computed 属性的值会根据其依赖的数据自动更新，且只有在依赖变化时才会重新计算。
基本语法
new Vue({
data: {
message: 'Hello'
},
computed: {
reversedMessage: function() {
return this.message.split('').reverse().join('')
}
}
})reversedMessage 是一个计算属性，其值依赖于 message。当 message 变化时，reversedMessage 会自动更新。
计算属性的缓存机制
计算属性是基于它们的依赖进行缓存的。只有在依赖发生变化时，计算属性才会重新计算。如果依赖没有变化，多次访问计算属性会直接返回缓存的结果，而不会重复执行计算逻辑。
computed: {
now: function() {
return Date.now()
}
}now 不会更新，因为它没有依赖任何响应式数据。
计算属性的 setter
计算属性默认只有 getter，但也可以提供 setter。
computed: {
fullName: {
get: function() {
return this.firstName + ' ' + this.lastName
},
set: function(newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}调用 this.fullName = 'John Doe' 时，setter 会被触发，firstName 和 lastName 会相应更新。
计算属性 vs 方法
计算属性和方法都能实现类似的功能，但计算属性具有缓存优势。方法每次调用都会执行函数，而计算属性只有在依赖变化时才会重新计算。
methods: {
reversedMessage: function() {
return this.message.split('').reverse().join('')
}
}每次访问 reversedMessage() 都会执行函数，而计算属性 reversedMessage 只有在 message 变化时才会重新计算。
计算属性的依赖追踪
Vue 通过依赖追踪系统实现计算属性的响应式。当计算属性被访问时，Vue 会记录所有依赖的数据。当这些数据变化时，计算属性会重新计算。
computed: {
sum: function() {
return this.a + this.b
}
}sum 依赖于 a 和 b，当 a 或 b 变化时，sum 会重新计算。
计算属性的异步问题
计算属性是同步的，不支持异步操作。如果需要异步处理，可以使用 watch 或结合 methods 和 data。
data() {
return {
asyncData: null
}
},
created() {
fetchData().then(data => {
this.asyncData = data
})
},
computed: {
processedData() {
return this.asyncData ? this.asyncData.process() : null
}
}processedData 依赖于 asyncData，但异步操作需要在 created 或其他生命周期钩子中完成。
计算属性的性能优化
计算属性的缓存机制可以有效减少不必要的计算，但在依赖较多或计算逻辑复杂时，仍需注意性能。
避免在计算属性中执行复杂或耗时的操作，必要时可以将复杂逻辑拆分为多个计算属性或使用 watch 监听变化。
computed: {
filteredList() {
return this.list.filter(item => item.active)
},
sortedList() {
return this.filteredList.sort((a, b) => a.order - b.order)
}
}将过滤和排序拆分为两个计算属性，可以提高可读性和性能。
