vue为啥能实现监听

Vue 实现监听的原理

Vue 的监听机制基于 JavaScript 的 Object.defineProperty 或 ES6 的 Proxy（Vue 3 中采用）。通过劫持对象的属性访问和修改，Vue 能够在数据变化时触发更新。

数据劫持的核心

在 Vue 2 中，Object.defineProperty 被用于劫持对象的属性。通过定义属性的 getter 和 setter，Vue 能够追踪依赖并在数据变化时通知相关视图更新。

Object.defineProperty(obj, key, {
  get() {
    // 收集依赖
    return value;
  },
  set(newVal) {
    // 触发更新
    value = newVal;
  }
});

依赖收集与派发更新

Vue 通过一个全局的 Dep 类管理依赖。每个被劫持的属性都会有一个对应的 Dep 实例，用于存储所有依赖该属性的 Watcher 实例。当数据变化时，Dep 会通知所有 Watcher 执行更新。

class Dep {
  constructor() {
    this.subs = [];
  }
  addSub(sub) {
    this.subs.push(sub);
  }
  notify() {
    this.subs.forEach(sub => sub.update());
  }
}

虚拟 DOM 与批量更新

Vue 通过虚拟 DOM 和异步更新队列优化性能。数据变化时，Vue 不会立即更新 DOM，而是将变更推入队列，在下一个事件循环中批量处理，避免不必要的重复渲染。

Vue 3 的 Proxy 优化

Vue 3 使用 Proxy 替代 Object.defineProperty，解决了 Vue 2 中无法监听数组和对象新增属性的问题。Proxy 可以直接监听整个对象，无需递归遍历属性，性能更高。

const observed = new Proxy(obj, {
  get(target, key) {
    // 收集依赖
    return Reflect.get(target, key);
  },
  set(target, key, value) {
    // 触发更新
    return Reflect.set(target, key, value);
  }
});

响应式系统的优势

Vue 的响应式系统通过数据劫持和依赖追踪，实现了数据与视图的自动同步。开发者只需关注数据逻辑，无需手动操作 DOM，提高了开发效率和代码可维护性。