剖析Vue2源码，探秘响应式系统的奥秘

前端

2023-12-21 09:03:10

Vue2的响应式系统：从观察者模式到响应式原理

观察者模式：事件监听的艺术

观察者模式是一种经典的设计模式，在Vue2中，它用于巧妙地实现数据与视图的绑定，确保数据变化时视图自动更新。

Vue2通过Dep和Watcher两个类实现观察者模式。Dep类负责收集依赖于某一数据的观察者（Watcher），而Watcher类负责监听数据变化，一旦数据改变，便触发观察者执行更新操作。

响应式原理：深度探索数据反应性

Vue2的响应式原理本质上是一个深度遍历和依赖收集的过程，它通过以下步骤实现：

对象劫持： 当一个对象被声明为响应式对象时，Vue2劫持其属性，拦截getter和setter方法。
依赖收集： 在getter方法中，Vue2收集依赖于该属性的观察者（Watcher）。
属性变更： 当该属性发生改变时，setter方法会通知所有依赖于它的观察者。
更新视图： 观察者接收到通知后，会触发视图更新操作。

代码示例

// 声明一个响应式对象
const obj = new Vue({
  data: {
    name: 'John Doe'
  }
});

// 创建一个观察者，依赖于obj.name
const watcher = new Watcher(() => {
  // 视图更新
  console.log(obj.name);
});

// 改变obj.name
obj.name = 'Jane Doe';

// 观察者接收到通知并更新视图
console.log('Updated name: Jane Doe');

源代码分析：揭秘响应式机制

在Vue2源码中，响应式原理主要在Observer和Dep类中实现。Observer类负责将对象转换为响应式对象，而Dep类负责收集和管理依赖关系。

Observer.js

export class Observer {
  constructor(value) {
    this.value = value;
    this.dep = new Dep();
    def(value, '__ob__', this);
    if (isArray(value)) {
      if (hasProto) {
        protoAugment(value, arrayMethods);
      } else {
        copyAugment(value, arrayMethods, arrayKeys);
      }
      this.observeArray(value);
    } else {
      this.walk(value);
    }
  }
}

Dep.js

export class Dep {
  constructor() {
    this.subs = [];
  }

  addSub(sub) {
    this.subs.push(sub);
  }

  notify() {
    for (let i = 0, l = this.subs.length; i < l; i++) {
      this.subs[i].update();
    }
  }
}