当前位置：首页 > VUE

vue怎么实现数据检测

2026-01-12 02:30:17VUE

Vue 数据检测的实现方式

Vue 通过响应式系统实现数据检测，核心是利用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）对数据进行劫持，结合发布-订阅模式实现依赖追踪和更新。

Vue 2 的实现

数据劫持

vue怎么实现数据检测

// 简化版数据劫持示例
function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      console.log('读取数据');
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      console.log('更新数据');
      val = newVal;
      // 触发视图更新
    }
  });
}

依赖收集

vue怎么实现数据检测

每个组件实例对应一个 Watcher 实例
在 getter 中收集依赖（Dep.target 指向当前 Watcher）
在 setter 中通知所有依赖进行更新

Vue 3 的实现

Proxy 代理

// 简化版 Proxy 实现
const reactive = (target) => {
  return new Proxy(target, {
    get(target, key, receiver) {
      track(target, key); // 依赖收集
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      Reflect.set(target, key, value, receiver);
      trigger(target, key); // 触发更新
      return true;
    }
  });
};

数组的特殊处理

Vue 2 中通过重写数组方法实现响应式：

const arrayProto = Array.prototype;
const arrayMethods = Object.create(arrayProto);

['push', 'pop', 'shift', 'unshift'].forEach(method => {
  const original = arrayProto[method];
  arrayMethods[method] = function(...args) {
    const result = original.apply(this, args);
    // 通知更新
    return result;
  };
});