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 能够实现高效的响应式更新。

相关推荐
试图让你心动8 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_8 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈琦鹏8 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
小毛驴85010 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
JSON_L13 小时前
Vue 电影导航组件
前端·javascript·vue.js
计算机编程果茶熊13 小时前
毕设选题难、不会写代码、答辩紧张?校园失物招领系统从需求到实现全流程指南|计算机毕业设计
java·vue.js
奇舞精选14 小时前
从零开始实现Vue3+WebAssembly万级数据表格开发流程
vue.js·webassembly
Britney⁺♛&?ꪶꪫꪜꫀ17 小时前
Vue2上
vue.js·npm
江城开朗的豌豆17 小时前
Element UI动态组件样式修改小妙招,轻松拿捏!
前端·javascript·vue.js
海天胜景20 小时前
vue3 el-table 列数据合计
前端·javascript·vue.js