vue computed实现原理
Vue computed 实现原理
Vue 的 computed 属性是基于响应式系统的依赖追踪机制实现的。其核心原理是通过 Object.defineProperty 或 Proxy（Vue 3）将计算属性转换为响应式数据，并在依赖的响应式数据变化时重新计算。
依赖收集与触发更新
计算属性在首次访问时会执行其 getter 函数，并在此过程中触发依赖的响应式数据的 get 拦截。Vue 的响应式系统会记录当前正在计算的 computed 属性与依赖数据之间的关系。
当依赖的响应式数据发生变化时，会触发 setter 或 Proxy 的 set 拦截，通知所有依赖它的计算属性重新计算。计算属性会缓存上一次的计算结果，只有在依赖变化时才会重新计算。
惰性求值与缓存
计算属性是惰性求值的，只有在被访问时才会计算。如果依赖的数据没有变化，多次访问计算属性会直接返回缓存的结果，而不会重复计算。
实现示例（简化版）
以下是一个简化的 computed 实现逻辑，展示了其核心机制：
function defineComputed(target, key, computeFn) {
let value;
let dirty = true; // 标记是否需要重新计算
const effect = () => {
dirty = true;
// 触发依赖更新（例如重新渲染）
};
// 在计算过程中收集依赖
const runner = effect(() => {
value = computeFn();
dirty = false;
}, { lazy: true });
Object.defineProperty(target, key, {
get() {
if (dirty) {
runner(); // 重新计算
}
return value;
},
set() {
console.warn('Computed property is read-only');
}
});
}Vue 3 中的优化
在 Vue 3 中，computed 基于 Proxy 和 Reflect 实现，利用了更高效的依赖追踪机制。computed 返回的是一个 ref 对象，可以通过 .value 访问其值。
import { computed } from 'vue';
const count = ref(0);
const double = computed(() => count.value * 2);总结
Vue 的 computed 通过响应式依赖追踪、惰性求值和缓存机制，实现了高效的计算属性。其核心思想是减少不必要的计算，仅在依赖变化时重新计算，从而提升性能。
