浅析Observer，抽丝剥茧高仿Vue2.x中的观察者模式

2023-10-01 02:31:35

引言

Vue.js作为前端开发中备受推崇的MVVM框架，其核心特性之一就是响应式数据，而Observer正是实现这一特性的关键。本文将基于Vue2.x源码，深入探讨Observer的实现原理，并逐步引导您手动创建Vue2.x风格的Observer，为您揭开响应式数据的运作机制，提升对Vue底层架构的理解。

理解Observer的基础

响应式数据的本质

Vue中的响应式数据是指数据一旦发生变化，就能自动触发视图更新的数据。这得益于Vue对数据对象的劫持，当数据对象发生变化时，劫持函数会触发响应动作，进而更新视图。

Observer的作用

Observer作为响应式数据的观察者，肩负着以下两项重要职责：

劫持数据对象的属性，并将其转换为可被侦测的属性。
当可被侦测的属性值发生变化时，通知订阅该属性的依赖项，触发相应更新。

Vue2.x源码中的Observer实现

定义Observer

Vue2.x源码中的Observer是一个类，定义如下：

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

其中，dep是一个Dep实例，用于收集和管理依赖。

walk方法

walk方法用于递归遍历数据对象及其子属性，并为每个属性添加getter和setter，以便对属性值的变化进行监听：

walk(obj) {
  const keys = Object.keys(obj);
  for (let i = 0; i < keys.length; i++) {
    defineReactive(obj, keys[i], obj[keys[i]]);
  }
}

defineReactive方法

defineReactive方法用于劫持单个属性，将其转换为可被侦测的属性：

defineReactive(obj, key, val) {
  const dep = new Dep();
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      ...
    },
    set: function reactiveSetter(newVal) {
      ...
    }
  });
}

getter和setter函数内部，均会通知依赖收集器（dep）收集依赖，并在属性值变化时触发相应的更新。

手动创建Vue2.x风格的Observer

创建Observer类

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

实现walk方法

walk(obj) {
  const keys = Object.keys(obj);
  for (let i = 0; i < keys.length; i++) {
    this.defineReactive(obj, keys[i], obj[keys[i]]);
  }
}

实现defineReactive方法

defineReactive(obj, key, val) {
  const dep = new Dep();
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      ...
    },
    set: function reactiveSetter(newVal) {
      ...
    }
  });
}