Vue dep.notify() 含义及作用详解

// 依赖管理器：收集Watcher，触发更新
class Dep {
  constructor() {
    this.subs = []; // 存放所有依赖当前属性的Watcher
  }
  // 收集依赖：把当前Watcher加入数组
  depend() {
    if (Dep.target) { // Dep.target 是当前活跃的Watcher（比如组件渲染Watcher）
      this.subs.push(Dep.target);
    }
  }
  // 通知所有Watcher更新
  notify() {
    // 遍历所有依赖的Watcher，执行update方法
    this.subs.forEach(watcher => watcher.update());
  }
}
// Dep.target：全局变量，标记当前正在执行的Watcher（渲染/计算/监听）
Dep.target = null;

class Watcher {
  constructor(vm, expr, callback) {
    this.vm = vm; // Vue实例
    this.expr = expr; // 监听的属性（如 'user.name'）
    this.callback = callback; // 更新回调（比如重新渲染组件）
    this.value = this.get(); // 初始化：访问属性，触发依赖收集
  }
  // 访问属性，触发getter，收集依赖
  get() {
    Dep.target = this; // 标记当前Watcher为活跃状态
    const value = this.vm[this.expr]; // 访问属性，触发getter → dep.depend()
    Dep.target = null; // 重置
    return value;
  }
  // 执行更新（由dep.notify()调用）
  update() {
    const newVal = this.vm[this.expr]; // 获取新值
    this.callback(newVal); // 执行回调（比如重新渲染组件）
  }
}

function defineReactive(obj, key, val) {
  const dep = new Dep(); // 每个属性对应一个Dep
  observe(val); // 递归处理嵌套对象
  Object.defineProperty(obj, key, {
    get() {
      dep.depend(); // 收集依赖：把当前Watcher加入dep.subs
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      val = newVal;
      observe(newVal); // 新值是对象则递归监听
      dep.notify(); // 🔥 关键：属性修改，通知所有Watcher更新
    }
  });
}

// 模拟Vue实例
const vm = {
  data: { user: { name: '张三' } }
};
// 把data变成响应式
observe(vm.data);
// 创建Watcher：监听user.name，回调是打印新值（模拟组件渲染）
new Watcher(vm.data, 'user.name', (newVal) => {
  console.log('视图更新：name变为', newVal);
});
// 第一步：访问属性 → 触发getter → 收集依赖
console.log(vm.data.user.name); // 输出"张三"，此时Dep.subs已存入这个Watcher
// 第二步：修改属性 → 触发setter → dep.notify()
vm.data.user.name = '李四'; 
// 🔥 dep.notify()执行 → 遍历subs → 调用Watcher.update() → 打印"视图更新：name变为 李四"

new Vue({
  data() {
    return { msg: 'hello' };
  },
  template: `<div>{{ msg }}</div>`
});
// 当你修改 msg 时：
this.msg = 'world'; 
// 触发 msg 的 setter → dep.notify() → 通知组件渲染Watcher → 组件重新渲染 → 页面显示 'world'