当前位置：首页 > VUE

vue怎么实现数据检测

2026-01-07 03:02:07VUE

Vue 数据检测的实现方式

Vue 通过响应式系统实现数据检测，核心机制基于 Object.defineProperty（Vue 2）或 Proxy（Vue 3）。以下是具体实现方法：

基于 Vue 2 的 `Object.defineProperty`

Vue 2 通过递归遍历数据对象，为每个属性添加 getter/setter 拦截操作：

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      console.log(`读取 ${key}`);
      return val;
    },
    set(newVal) {
      if (newVal !== val) {
        console.log(`设置 ${key} 为 ${newVal}`);
        val = newVal;
      }
    }
  });
}

基于 Vue 3 的 `Proxy`

Vue 3 使用 ES6 的 Proxy 代理整个对象，无需递归初始化：

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      console.log(`读取 ${key}`);
      return Reflect.get(target, key);
    },
    set(target, key, value) {
      if (target[key] !== value) {
        console.log(`设置 ${key} 为 ${value}`);
        return Reflect.set(target, key, value);
      }
      return true;
    }
  });
}

数组的响应式处理

Vue 对数组方法（push/pop/shift 等）进行重写：

const arrayProto = Array.prototype;
const arrayMethods = Object.create(arrayProto);
['push', 'pop'].forEach(method => {
  const original = arrayProto[method];
  arrayMethods[method] = function(...args) {
    console.log(`数组 ${method} 操作`);
    return original.apply(this, args);
  };
});

依赖收集与派发更新

Vue 通过 Watcher 和 Dep 类实现依赖管理：

vue怎么实现数据检测

class Dep {
  constructor() {
    this.subscribers = new Set();
  }
  depend() {
    if (currentWatcher) {
      this.subscribers.add(currentWatcher);
    }
  }
  notify() {
    this.subscribers.forEach(watcher => watcher.update());
  }
}