vue computed实现机制
Vue computed 实现机制
Vue 的 computed 属性是基于响应式依赖的缓存机制，其核心实现依赖于 Vue 的响应式系统和依赖收集。
初始化阶段
在 Vue 实例初始化时，computed 属性会被遍历并转化为 getter 和 setter。每个 computed 属性会被包装成一个 Watcher 实例，并标记为 lazy（惰性求值），只有在真正被访问时才会计算值。
// 伪代码：computed 初始化
function initComputed(vm, computed) {
const watchers = {};
for (const key in computed) {
const getter = computed[key];
watchers[key] = new Watcher(vm, getter, { lazy: true });
defineComputed(vm, key, watchers[key]);
}
}依赖收集
当 computed 的 getter 被调用时，会触发依赖收集。getter 中访问的响应式属性会将其对应的 Dep 与当前 computed Watcher 建立关联。例如：
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
}- 访问
fullName时，会触发firstName和lastName的getter，将computed Watcher添加到它们的依赖列表中。
缓存机制
computed 的值会被缓存，只有在其依赖的响应式属性发生变化时才会重新计算。通过 Watcher 的 dirty 标志位控制：
- 初次访问时，
dirty为true，触发计算并缓存结果。 - 依赖未变化时，直接返回缓存值。
- 依赖变化时，标记
dirty为true，下次访问时重新计算。
// 伪代码：computed getter 逻辑
function createComputedGetter(key) {
return function computedGetter() {
const watcher = this._computedWatchers[key];
if (watcher.dirty) {
watcher.evaluate(); // 重新计算
}
if (Dep.target) {
watcher.depend(); // 依赖收集
}
return watcher.value;
};
}触发更新
当依赖的响应式数据变化时，会通知 computed Watcher 更新。但 computed 不会立即重新计算，而是标记 dirty 为 true，等待下次访问时再计算。这种惰性更新机制避免了不必要的性能开销。
与 methods 和 watch 的区别
methods：每次调用都会执行函数，无缓存。watch：显式监听数据变化，适合异步或开销较大的操作。computed：基于依赖的缓存，适合派生状态的计算。
总结
Vue 的 computed 通过响应式依赖收集和惰性求值实现高效缓存，避免了重复计算，是处理复杂逻辑的理想选择。
