深入浅出Vue observer 源码学习

2023-09-15 17:33:32

Vue响应式更新的原理

Vue的响应式更新依赖于Object.defineProperty()方法。该方法可以劫持对象的属性访问，并在属性值发生变化时触发回调函数。Vue利用这一特性，在初始化组件时，通过Object.defineProperty()方法劫持组件数据的属性，并在属性值发生变化时触发更新视图。

Observer源码解析

Observer是Vue响应式系统中的一个重要类，负责将普通对象转换为响应式对象。Observer源码如下：

class Observer {
  constructor(value) {
    this.value = value;
    this.dep = new Dep();
    this.walk(value);
  }

  walk(obj) {
    Object.keys(obj).forEach((key) => {
      defineReactive(obj, key, obj[key]);
    });
  }
}

Observer类构造函数接收一个value参数，即需要转换为响应式对象的对象。构造函数首先创建一个Dep实例，用于存储依赖于该响应式对象的组件。然后，通过walk()方法遍历value对象，并对对象的每个属性调用defineReactive()方法，将其转换为响应式属性。

defineReactive()方法如下：

function defineReactive(obj, key, val) {
  const dep = new Dep();

  Object.defineProperty(obj, key, {
    get() {
      dep.depend();
      return val;
    },
    set(newVal) {
      if (newVal !== val) {
        val = newVal;
        dep.notify();
      }
    }
  });
}

defineReactive()方法接收三个参数：obj（需要转换的响应式对象）、key（属性名称）和val（属性值）。该方法首先创建一个Dep实例，用于存储依赖于该属性的组件。然后，通过Object.defineProperty()方法劫持对象的属性，并在属性值发生变化时触发更新视图。

实例讲解

以下是一个简单的例子，展示如何使用Observer将普通对象转换为响应式对象：

const data = {
  name: 'John',
  age: 20
};

const observer = new Observer(data);

observer.value.name = 'Mary';

console.log(observer.value.name); // 输出：Mary

在这个例子中，我们创建了一个data对象，并通过Observer类将其转换为响应式对象。然后，我们修改了data对象的name属性，并输出修改后的值。输出结果是Mary，这表明Vue的响应式系统能够正确地更新视图。