Vue中的computed和watch的原理解析

// 模拟computed核心逻辑（Vue3风格）
class ComputedRef {
  constructor(getter, ctx) {
    this.getter = getter; // 计算函数
    this.ctx = ctx; // 上下文
    this._value = null; // 缓存值
    this._dirty = true; // 脏标记：true需重新计算
  }
  // 访问computed时触发
  get value() {
    if (this._dirty) {
      this._value = this.getter.call(this.ctx); // 执行计算
      this._dirty = false; // 标记为清洁
    }
    return this._value; // 复用缓存
  }
  // 依赖变化时调用
  markDirty() {
    this._dirty = true; // 标记为脏
  }
}
// 实际使用
const count = ref(1);
// 计算属性：依赖count
const doubleCount = new ComputedRef(() => count.value * 2, this);
console.log(doubleCount.value); // 2（计算并缓存）
console.log(doubleCount.value); // 2（直接复用缓存）
count.value = 2; // 触发count的setter，调用doubleCount.markDirty()
console.log(doubleCount.value); // 4（重新计算）

// 模拟watch核心逻辑（Vue3风格）
function watch(source, callback, options = {}) {
  const { immediate = false, deep = false } = options;
  let oldValue;
  // 1. 初始化：获取初始值
  const getInitialValue = () => {
    // 深度监听时递归收集对象所有属性依赖
    if (deep && isObject(source.value)) {
      traverse(source.value);
    }
    return source.value;
  };
  // 2. 副作用函数：数据变化时执行
  const effectFn = () => {
    const newValue = source.value;
    callback(newValue, oldValue); // 触发回调
    oldValue = newValue;
  };
  // 3. 立即执行（immediate为true时）
  if (immediate) {
    oldValue = getInitialValue();
    effectFn();
  } else {
    oldValue = getInitialValue();
  }
  // 4. 关联响应式数据：依赖变化时触发effectFn
  effect(effectFn, { lazy: false });
}
// 实际使用
const user = reactive({ name: '张三', age: 20 });
// 监听user.age，支持深度监听
watch(
  () => user.age,
  (newAge, oldAge) => {
    console.log(`年龄从${oldAge}变为${newAge}`);
  },
  { immediate: true, deep: false }
);