Vue数据响应式原理步骤解析

Vue 的数据响应式原理是其核心特性之一，它实现了数据变化自动驱动视图更新。Vue 2.x 和 Vue 3.x 的实现方式不同，下面分别详解：

Vue 2.x 的响应式原理（基于 Object.defineProperty）

核心步骤：

数据劫持（Observer）：
-遍历 data 中的每个属性，用 Object.defineProperty 重写其 getter/setter。
-每个属性关联一个 Dep 实例（依赖收集器）。依赖收集（Dependency Collection）：
-当组件渲染时，会访问数据属性，触发 getter。
-此时 Dep 会记录当前 Watcher（每个组件对应一个渲染 Watcher）。派发更新（Dispatching Updates）：
-当数据被修改时，触发 setter。
-Dep 通知所有关联的 Watcher 执行更新（如重新渲染组件）。数组的特殊处理：
-重写数组的 7 个方法（push/pop/shift/unshift/splice/sort/reverse），在调用这些方法时手动触发更新。
-通过 proto 继承改写后的数组方法（或直接覆盖原型）。

代码简化示例：

class Dep {
  constructor() {
    this.subs = new Set();
  }
  depend() {
    if (currentWatcher) this.subs.add(currentWatcher);
  }
  notify() {
    this.subs.forEach(watcher => watcher.update());
  }
}
function defineReactive(obj, key) {
  const dep = new Dep();
  let value = obj[key];
  Object.defineProperty(obj, key, {
    get() {
      dep.depend(); // 收集依赖
      return value;
    },
    set(newVal) {
      value = newVal;
      dep.notify(); // 触发更新
    }
  });
}

局限性：

• 无法检测新增/删除属性 → 需用 Vue.set/Vue.delete。
• 数组索引/长度修改无法监听 → 需用重写的方法或 Vue.set。
• 递归遍历对象性能损耗。

Vue 3.x 的响应式原理（基于 Proxy）

Vue 3 使用 Proxy 替代 Object.defineProperty，彻底解决 Vue 2 的痛点。

核心步骤：

代理对象（Reactive）：
-通过 Proxy 包裹目标对象，拦截 所有操作（增/删/改/查/遍历等）。
-每个对象关联一个 ReactiveEffect 集合。

依赖收集：
-当访问数据时，触发 get 拦截，收集当前活跃的 Effect（副作用函数）。

触发更新：
-当修改数据时，触发 set 或 deleteProperty 拦截，通知所有关联的 Effect 重新执行。

代码简化示例：

const targetMap = new WeakMap(); // 存储所有依赖
function track(target, key) {
  if (!activeEffect) return;
  let depsMap = targetMap.get(target);
  if (!depsMap) targetMap.set(target, (depsMap = new Map()));
  let dep = depsMap.get(key);
  if (!dep) depsMap.set(key, (dep = new Set()));
  dep.add(activeEffect); // 收集当前 Effect
}
function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;
  depsMap.get(key)?.forEach(effect => effect.run()); // 执行所有 Effect
}
const proxy = new Proxy(data, {
  get(target, key) {
    track(target, key); // 访问时收集依赖
    return Reflect.get(target, key);
  },
  set(target, key, value) {
    Reflect.set(target, key, value);
    trigger(target, key); // 修改时触发更新
    return true;
  }
});

优势：

• 支持监听动态新增/删除属性。
• 支持监听数组索引和长度变化。
• 惰性收集：仅代理访问到的属性，减少初始化开销。
• 统一处理对象/数组，无需特殊逻辑。

关键概念补充

副作用函数（Effect）：
-Vue 3 使用 ReactiveEffect 封装更新逻辑（相当于 Vue 2 的 Watcher）。
-组件渲染、计算属性、侦听器都是副作用函数。

响应式 API：
-reactive()：创建深层次响应式对象（基于 Proxy）。
-ref()：将基本类型包装为 { value: … } 的响应式引用（通过 .value 访问）。
-computed/watch：基于 Effect 系统实现。

依赖清理：
-每次执行 Effect 前清理旧依赖，避免无效更新（如条件分支变化时）。

总结对比

Vue 3 的响应式系统独立为库 @vue/reactivity，可脱离框架使用。

到此这篇关于Vue数据响应式原理解析的文章就介绍到这了,更多相关Vue数据响应式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论