100行代码理解和分析vue2.0响应式架构

下面是“100行代码理解和分析vue2.0响应式架构”的完整攻略：

什么是Vue2.0响应式架构？

Vue2.0响应式架构是Vue2.0中的核心特性，它通过数据劫持和观察者模式，实现了数据的双向绑定，达到了将数据和视图解耦的目的，使我们能够更加专注于业务逻辑的开发。

数据劫持

Vue的数据劫持，其实就是利用Object.defineProperty()拦截对象属性的读取和设置操作，从而在读取和设置属性时执行一些逻辑。具体的实现是通过给每个对象的属性添加getter和setter方法，在getter方法中记录读取操作，在setter方法中记录设置操作。

示例1：观察数据劫持

// 定义一个对象
let obj = {
  name: "Vue2.0",
  version: "2.6.12"
}

// 拦截对象属性以记录读写操作
Object.defineProperty(obj, "name", {
  get() {
    console.log("读取name属性");
    return obj._name;
  },
  set(val) {
    console.log("设置name属性为" + val);
    obj._name = val;
  }
})

// 读取name属性
console.log(obj.name) // 输出 "读取name属性" 和 "Vue2.0"

// 设置name属性
obj.name = "Vue3.0"; // 输出 "设置name属性为Vue3.0"
console.log(obj.name); // 输出 "读取name属性" 和 "Vue3.0"

观察者模式

Vue的观察者模式，其实就是对数据的发布-订阅模式的封装。在Vue中，每个组件实例都有一个Watcher实例，它通过收集该组件依赖的所有数据，然后监听这些数据的变化，从而触发组件的重新渲染。

示例2：观察者模式实现

// 定义一个发布者
class Publisher {
  constructor() {
    this.subscribers = []; // 观察者列表
  }

  // 添加观察者
  addSubscriber(subscriber) {
    this.subscribers.push(subscriber);
  }

  // 移除观察者
  removeSubscriber(subscriber) {
    let index = this.subscribers.indexOf(subscriber);
    if (index !== -1) {
      this.subscribers.splice(index, 1);
    }
  }

  // 发布消息
  publish(data) {
    for (let i = 0; i < this.subscribers.length; i++) {
      this.subscribers[i].update(data);
    }
  }
}

// 定义一个观察者
class Subscriber {
  constructor() {
    this.data = null; // 观察者持有的数据
  }

  // 更新数据
  update(data) {
    console.log("观察者接收到更新：", data);
    this.data = data;
  }
}

// 创建一个发布者
const publisher = new Publisher();

// 创建两个观察者
const subscriber1 = new Subscriber();
const subscriber2 = new Subscriber();

// 添加观察者
publisher.addSubscriber(subscriber1);
publisher.addSubscriber(subscriber2);

// 发布消息
publisher.publish({ message: "Hello world" });

// 输出：
// 观察者接收到更新： {message: "Hello world"}
// 观察者接收到更新： {message: "Hello world"}

Vue2.0响应式架构实现原理

Vue2.0响应式架构的实现原理就是将数据对象进行递归地劫持，如果该对象的某个属性被读取或更新，就触发该属性的getter和setter方法，同时触发该属性的依赖Watcher的更新操作。

Vue2.0响应式架构的实现一共涉及到以下几个模块：

Observer：实现数据的递归劫持，利用Object.defineProperty()方法增加getter/setter方法；
Dep：存储观察者的依赖，并提供增加/移除观察者的方法；
Watcher：接收观察者的回调函数，存储依赖的属性的Dep实例，并触发更新操作；
Compiler：解析模板指令，将模板中的变量替换成实际数据，并创建触发更新的Watcher实例。

示例分析

看一下这段示例代码，以巩固一下我们的理解：

<!DOCTYPE html>
<html>
  <body>
    <div id="app">
      <p>{{ message }}</p>
      <input v-model="message">
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: "#app",
      data: {
        message: "Hello Vue!"
      }
    });
  </script>
</html>

我们通过一个简单的Vue示例，来看看Vue2.0响应式架构是如何工作的。

创建Vue实例，并传入一个data对象；
将data对象通过Observer进行递归劫持，为data对象的每个属性添加getter/setter方法，并在getter/setter方法中分别维护该属性的依赖列表Dep实例；
创建Watcher实例，将该Watcher实例添加到message属性的Dep实例中，并触发读取message属性，从而将Watcher实例添加到Vue实例的依赖列表中；
解析模板指令，将message属性替换成实际数据，并创建触发更新的Watcher实例；
当message属性更新时，触发该属性的setter方法，从而触发该属性的Dep实例执行notify()方法，通知所有依赖该属性的Watcher实例进行更新。