当前位置：首页 > VUE

vue如何实现数据监听

2026-02-21 08:15:24VUE

Vue 数据监听的实现方式

Vue 主要通过数据劫持和发布-订阅模式实现数据监听，核心是 Object.defineProperty（Vue 2）或 Proxy（Vue 3）。以下是具体实现方法：

使用 `Object.defineProperty`（Vue 2）

通过劫持对象的属性访问和修改，触发依赖收集和更新通知。

vue如何实现数据监听

// 简易实现
function defineReactive(obj, key, val) {
  const dep = new Dep(); // 依赖收集器

  Object.defineProperty(obj, key, {
    get() {
      dep.depend(); // 收集依赖
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      val = newVal;
      dep.notify(); // 通知更新
    }
  });
}

依赖收集：在 getter 中通过 Dep 类收集当前属性的依赖（如 Watcher）。
触发更新：在 setter 中通过 Dep.notify() 通知所有依赖执行更新。

使用 `Proxy`（Vue 3）

Proxy 可以监听整个对象，无需递归遍历属性，性能更好。

vue如何实现数据监听

function reactive(obj) {
  return new Proxy(obj, {
    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 通过重写数组方法（如 push、pop）实现监听：

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

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

手动监听：`$watch` API

Vue 提供 $watch 方法手动监听数据变化：

export default {
  data() {
    return { count: 0 };
  },
  created() {
    this.$watch('count', (newVal, oldVal) => {
      console.log(`count变化：${oldVal} -> ${newVal}`);
    });
  }
};