当前位置：首页 > VUE

vue组件watch实现原理

2026-02-23 12:16:45VUE

Vue 组件 `watch` 实现原理

Vue 的 watch 机制基于响应式系统的依赖收集和触发更新机制。以下是其核心实现原理：

依赖收集与响应式系统

Vue 通过 Object.defineProperty 或 Proxy 实现数据劫持。当组件初始化时，watch 中定义的属性会被添加到依赖列表中。每次访问被监听的数据时，会触发 getter，将当前 watcher（监听器）添加到依赖中。

Watcher 类的核心逻辑

watch 的实现依赖于 Watcher 类。每个 watch 选项会创建一个 Watcher 实例，并在初始化时执行一次回调函数以收集依赖。当依赖的数据变化时，触发 setter，通知所有依赖的 Watcher 执行更新。

// 伪代码：Watcher 的核心逻辑
class Watcher {
  constructor(vm, expOrFn, callback) {
    this.vm = vm;
    this.getter = parsePath(expOrFn); // 解析属性路径
    this.callback = callback;
    this.value = this.get(); // 首次收集依赖
  }

  get() {
    pushTarget(this); // 将当前 Watcher 设置为全局正在计算的 Watcher
    const value = this.getter.call(this.vm, this.vm); // 触发 getter，收集依赖
    popTarget(); // 恢复之前的 Watcher
    return value;
  }

  update() {
    const oldValue = this.value;
    this.value = this.get(); // 重新获取值
    this.callback.call(this.vm, this.value, oldValue); // 执行回调
  }
}

深度监听与立即执行

深度监听（deep）：通过递归遍历对象的所有属性，为每个子属性绑定 Watcher，确保嵌套属性变化也能触发回调。
立即执行（immediate）：在 Watcher 初始化时直接调用回调函数，传入当前值。

异步更新队列

Vue 会将 Watcher 的更新操作推入异步队列（通过 nextTick 实现），避免频繁重复计算和渲染。多个数据变化会合并为一次更新。

vue组件watch实现原理

与 `computed` 的区别

watch 是主动监听，依赖变化时执行回调；computed 是惰性计算，仅在依赖变化且被访问时重新计算。
watch 适合处理异步或开销较大的操作；computed 适合派生状态。

总结

Vue 的 watch 通过响应式系统的依赖收集和 Watcher 机制实现。其核心是监听数据变化并执行回调，支持深度监听、立即执行等特性，同时利用异步队列优化性能。

标签: 组件原理

分享给朋友：

vue组件watch实现原理