Vue 源码分析：数据观测和依赖收集的原理

前端

2023-09-17 22:14:17

Vue 作为前端开发框架中的佼佼者，其数据观测和依赖收集机制可谓是其核心精髓。为了深入理解 Vue 的工作原理，我们不妨深入其源码，一探究竟。

Vue 1.0 采用文档碎片（Fragment）采集的方式来收集数据变化。当我们更新数据时，系统会将该片段渲染成 DOM，并插入到页面中。这种方式虽然直观简单，但存在两个缺陷：

对象属性增删无法被监听。
数组索引改值无法被监听。

为了解决这两个问题，Vue 1.0 引入了一个解析器（Compiler），它负责遍历 Vue 语法，并解析出相关的依赖关系。当数据发生变化时，解析器会自动触发对应的依赖，从而实现数据观测。

Vue 2.3 及以上版本采用了一种全新的响应系统，其核心原理是：

依赖收集： 当一个组件被创建时，Vue 会收集该组件的所有依赖，并将其存储在 Watcher 中。
依赖更新： 当依赖发生变化时，Watcher 会被触发，并执行对应的更新逻辑。

这种响应系统不仅解决了 Vue 1.0 中的缺陷，还极大地提高了性能和灵活性。

为了更加深入地理解 Vue 的数据观测和依赖收集机制，我们可以参考以下关键代码段：

// Vue 1.0 碎片采集
compile = function compile(el, options) {
  // 省略代码
  template = doc.createDocumentFragment();
  // 省略代码
  el.appendChild(template);
};

// Vue 2.3+ 依赖收集
class Watcher {
  constructor(vm, expOrFn, cb, options) {
    // 省略代码
    this.getter = typeof expOrFn === 'function' ? expOrFn : function() {
      return vm[expOrFn];
    };
    this.lazy = !!options.lazy;
    // 省略代码
  }

  update() {
    // 省略代码
    if (this.lazy) {
      this.value = this.lazy ? this.getter.call(vm) : undefined;
    } else {
      this.run();
    }
  }
}