vue2 中,为什么要 Dep.target 来收集依赖

在 Vue 2 中,Dep.target 主要用于收集依赖和触发依赖更新。Vue 的响应式系统使用了基于观察者模式的设计,其中有三个核心概念:ObserverDep(Dependency)和 Watcher

  1. Observer(观察者):负责将对象转化为响应式对象,即监听对象属性的变化。

  2. Dep(Dependency) :用于收集依赖,每个响应式对象上都有一个对应的 Dep 对象,其中存储了所有依赖于该对象的 Watcher

  3. Watcher(观察者) :负责创建视图和更新视图的逻辑,当依赖的数据发生变化时,Watcher 负责触发更新。

Dep.target 在这个机制中充当全局唯一的标志,用来指示当前正在进行依赖收集的 Watcher。在 Watcher 初始化过程中,会将 Dep.target 设置为当前 Watcher,然后触发数据的读取操作。当读取数据时,Observer 会检测当前是否有正在进行依赖收集的 Watcher(即 Dep.target 是否存在),如果有,就将该 Watcher 添加到当前属性对应的 Dep 中。

为什么要这样设计呢?

  • 精确定位依赖关系 :通过 Dep.target 的设置,可以精确地知道是哪个 Watcher 正在进行依赖收集。这样,每个属性的依赖关系都可以被精确地管理,避免不必要的更新。

  • 自动依赖收集:由于 JavaScript 是单线程的,通过在读取数据时收集依赖,可以自动追踪数据的变化,从而触发视图的更新。这样,开发者无需手动管理依赖关系,系统可以自动进行依赖追踪。

示例代码可能如下所示:

javascript 复制代码
// Dep 类用于收集依赖
class Dep {
  constructor() {
    this.subscribers = [];
  }

  // 添加依赖
  depend() {
    if (Dep.target && !this.subscribers.includes(Dep.target)) {
      this.subscribers.push(Dep.target);
    }
  }

  // 通知依赖更新
  notify() {
    this.subscribers.forEach(sub => sub.update());
  }
}

// Dep.target 用于指示当前的 Watcher
Dep.target = null;

// Watcher 类负责创建视图和更新视图的逻辑
class Watcher {
  constructor() {
    // 设置 Dep.target 为当前 Watcher
    Dep.target = this;
    // 在读取数据时,会触发依赖收集
    this.value = data.someProperty; 
    // 重置 Dep.target
    Dep.target = null;
  }

  // 更新视图的逻辑
  update() {
    // 实现更新的逻辑
  }
}

// Observer 类负责将对象转化为响应式对象
class Observer {
  constructor(data) {
    this.data = data;
    this.observe(data);
  }

  observe(data) {
    Object.keys(data).forEach(key => {
      let dep = new Dep();
      let val = data[key];

      Object.defineProperty(data, key, {
        get() {
          dep.depend(); // 在读取数据时收集依赖
          return val;
        },
        set(newVal) {
          if (val !== newVal) {
            val = newVal;
            dep.notify(); // 在数据变化时通知依赖更新
          }
        }
      });
    });
  }
}

// 示例数据
const data = {
  someProperty: 42
};

// 创建 Observer 实例,实现响应式
const observer = new Observer(data);

// 创建 Watcher 实例,用于更新视图
const watcher = new Watcher();

在这个简化的示例中,Dep.target 的设置和重置使得在读取数据时能够正确地收集依赖。这种机制使得 Vue 能够实现高效的响应式更新。

相关推荐
王王碎冰冰2 小时前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
天蓝色的鱼鱼3 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
我是日安3 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js
DevUI团队3 小时前
🚀 MateChat V1.8.0 震撼发布!对话卡片可视化升级,对话体验全面进化~
前端·vue.js·人工智能
好好好明天会更好3 小时前
pinia从定义到运用
前端·vue.js
代码小学僧3 小时前
Vite 项目最简单方法解决部署后 Failed to fetch dynamically imported Error问题
前端·vue.js·vite
东坡白菜4 小时前
SSE 实现 AI 对话中的流式输出
javascript·vue.js
猩兵哥哥8 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
EMT9 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
我是日安9 小时前
从零到一打造 Vue3 响应式系统 Day 9 - Effect:调度器实现与应用
前端·vue.js