vue中computed实现原理
Vue 中 computed 的实现原理
Vue 的 computed 属性是基于响应式依赖的缓存机制，其核心原理涉及依赖收集、缓存和惰性求值。
依赖收集与响应式
computed 属性通过 Object.defineProperty 或 Proxy（Vue 3）定义，在首次访问时会执行计算函数。计算过程中访问的响应式数据（如 data 或 props）会通过 getter 触发依赖收集，将当前 computed 属性作为依赖关联到这些数据上。
示例代码结构：
function defineComputed(target, key, computeFn) {
let cachedValue;
let dirty = true; // 标记是否需要重新计算
Object.defineProperty(target, key, {
get() {
if (dirty) {
cachedValue = computeFn();
dirty = false;
}
return cachedValue;
}
});
}缓存机制
计算属性会缓存计算结果，只有依赖的响应式数据变化时才会重新计算。Vue 通过 Watcher 实例管理这种关系：
- 初始化时为 computed 创建 lazy Watcher（惰性求值）。
- 依赖数据变化时标记 dirty 为 true，下次访问时重新计算。
触发更新流程
- 当依赖的响应式数据被修改时，触发 setter 通知所有关联的 Watcher。
- computed 的 Watcher 收到通知后标记 dirty 为 true，但不立即计算。
- 组件渲染时再次访问 computed 属性，触发 getter 重新计算并更新缓存。
与 methods 的区别
- 缓存性：computed 只在依赖变化时重新计算；methods 每次调用都会执行。
- 响应式：computed 自动追踪依赖，methods 需手动处理依赖关系。
Vue 3 的优化
Vue 3 使用 effect 和 ReactiveEffect 重构响应式系统：
- computed 通过
computed()API 创建，基于Ref实现。 - 采用 Proxy 减少递归依赖收集的开销。
Vue 3 示例：
import { computed } from 'vue';
const count = ref(0);
const double = computed(() => count.value * 2);
