深入理解 Vue 的响应式原理：从 Vue 2 到 Vue 3

深入理解 Vue 的响应式原理：从 Vue 2 到 Vue 3

引用

CSDN

1.

https://blog.csdn.net/vvilkim/article/details/145949509

Vue.js的响应式系统是其核心特性之一，它使得数据和视图能够自动保持同步。无论是Vue 2还是Vue 3，响应式原理都是通过监听数据变化并自动更新视图来实现的。然而，Vue 2和Vue 3在实现响应式的方式上有所不同。本文将深入探讨Vue的响应式原理，并通过模拟实现帮助你更好地理解其工作机制。

Vue 2的响应式原理

Vue 2使用Object.defineProperty来实现响应式。它的核心思想是通过劫持数据的读写操作，在数据变化时自动更新视图。

核心机制

1. 数据劫持：

• Vue会遍历data对象的所有属性，使用Object.defineProperty将这些属性转换为getter和setter。
• 当访问数据时（getter），Vue会收集依赖（即哪些组件或视图依赖于这个数据）。
• 当修改数据时（setter），Vue会通知所有依赖进行更新。

2. 依赖收集：

• Vue通过一个全局的Dep（依赖管理器）来管理依赖。
• 每个属性都有一个对应的Dep实例，用于存储所有依赖于该属性的Watcher（观察者）。
• 当数据变化时，Dep会通知所有Watcher更新视图。

3. Watcher：

• Watcher是Vue中用于监听数据变化的观察者。
• 每个组件实例都有一个对应的Watcher，它会将组件的渲染函数作为依赖收集的目标。
• 当数据变化时，Watcher会触发组件的重新渲染。

4. 数组的处理：

• Vue 2对数组的响应式处理是通过重写数组的变异方法（如push、pop、splice等）来实现的。
• 当调用这些方法时，Vue会触发视图更新。

模拟实现

以下是一个简化版的Vue 2响应式实现：

// 定义一个Dep类，用于管理依赖
class Dep {
  constructor() {
    this.subscribers = new Set(); // 存储Watcher
  }
  // 添加依赖
  depend() {
    if (activeWatcher) {
      this.subscribers.add(activeWatcher);
    }
  }
  // 通知更新
  notify() {
    this.subscribers.forEach(watcher => watcher.update());
  }
}
// 全局变量，用于存储当前的Watcher
let activeWatcher = null;
// 定义一个Watcher类，用于监听数据变化
class Watcher {
  constructor(updateFn) {
    this.updateFn = updateFn;
    this.update();
  }
  // 执行更新函数，并收集依赖
  update() {
    activeWatcher = this;
    this.updateFn();
    activeWatcher = null;
  }
}
// 将对象转换为响应式
function observe(obj) {
  Object.keys(obj).forEach(key => {
    let value = obj[key];
    const dep = new Dep();
    Object.defineProperty(obj, key, {
      get() {
        dep.depend(); // 收集依赖
        return value;
      },
      set(newValue) {
        if (newValue !== value) {
          value = newValue;
          dep.notify(); // 通知更新
        }
      },
    });
  });
}
// 测试代码
const data = { count: 0 };
observe(data);
new Watcher(() => {
  console.log(`Count updated: ${data.count}`);
});
data.count++; // 输出: Count updated: 1
data.count++; // 输出: Count updated: 2

Vue 3的响应式原理

Vue 3使用Proxy替代了Vue 2的Object.defineProperty，这使得响应式系统更加高效和灵活。

核心机制

1. Proxy：

• Proxy是ES6引入的特性，可以拦截对象的操作（如读取、赋值、删除等）。
• Vue 3使用Proxy来监听整个对象，而不是像Vue 2那样逐个监听属性。
• 通过Proxy，Vue可以更高效地处理对象和数组的变化。

2. Reactive API：

• Vue 3提供了reactive函数，用于将一个普通对象转换为响应式对象。
• 例如：

  const state = reactive({ count: 0 });
  state.count++; // 触发响应式更新
  

3. Ref API：

• Vue 3提供了ref函数，用于将基本类型数据（如数字、字符串）包装为响应式对象。
• ref返回一个包含value属性的对象，访问和修改数据需要通过value。
• 例如：

  const count = ref(0);
  count.value++; // 触发响应式更新
  

4. 依赖收集与触发更新：

• Vue 3仍然使用依赖收集和Watcher的机制，但实现方式更加高效。
• 通过effect函数（类似于Vue 2的Watcher）来监听数据变化并触发更新。

5. 性能优化：

• Vue 3的响应式系统在性能上有显著提升，尤其是在处理大型对象和数组时。
• Proxy可以监听动态添加的属性，而Vue 2需要通过Vue.set手动添加响应式属性。

模拟实现

以下是一个简化版的Vue 3响应式实现：

// 定义一个Dep类，用于管理依赖
class Dep {
  constructor() {
    this.subscribers = new Set(); // 存储Watcher
  }
  // 添加依赖
  depend() {
    if (activeWatcher) {
      this.subscribers.add(activeWatcher);
    }
  }
  // 通知更新
  notify() {
    this.subscribers.forEach(watcher => watcher.update());
  }
}
// 全局变量，用于存储当前的Watcher
let activeWatcher = null;
// 定义一个Watcher类，用于监听数据变化
class Watcher {
  constructor(updateFn) {
    this.updateFn = updateFn;
    this.update();
  }
  // 执行更新函数，并收集依赖
  update() {
    activeWatcher = this;
    this.updateFn();
    activeWatcher = null;
  }
}
// 将对象转换为响应式
function reactive(obj) {
  const deps = new Map(); // 存储每个属性的Dep
  return new Proxy(obj, {
    get(target, key) {
      let dep = deps.get(key);
      if (!dep) {
        dep = new Dep();
        deps.set(key, dep);
      }
      dep.depend(); // 收集依赖
      return target[key];
    },
    set(target, key, value) {
      if (target[key] !== value) {
        target[key] = value;
        const dep = deps.get(key);
        if (dep) {
          dep.notify(); // 通知更新
        }
      }
      return true;
    },
  });
}
// 测试代码
const state = reactive({ count: 0 });
new Watcher(() => {
  console.log(`Count updated: ${state.count}`);
});
state.count++; // 输出: Count updated: 1
state.count++; // 输出: Count updated: 2

Vue 2与Vue 3的对比

总结

Vue的响应式系统是其核心特性之一，它使得开发者可以专注于数据和逻辑，而无需手动操作DOM。Vue 2通过Object.defineProperty实现响应式，而Vue 3则通过Proxy提供了更高效和灵活的响应式能力。无论是Vue 2还是Vue 3，响应式原理的核心思想都是通过依赖收集和触发更新来实现数据和视图的同步。

希望通过本文的讲解和模拟实现，你能对Vue的响应式原理有更深入的理解。如果你对Vue的响应式系统感兴趣，可以进一步阅读Vue的源码，探索更多细节和优化技巧。