Vue3 响应式系统实现原理学习总结（四）：watch 实现剖析

2023-10-06 07:58:58

Vue3 响应式系统实现原理学习总结（四）

响应式系统是 Vue3 中的核心特性之一，它允许 Vue3 追踪和更新应用程序中的数据变化。在之前的文章中，我们已经总结了响应式系统基础实现、细节问题和 computed 相关的实现。本文将重点总结 watch 相关的实现。

watch 基本实现

watch 的基本实现相对简单，主要包括以下步骤：

创建一个 Watcher 实例。
将 Watcher 实例添加到一个 Watcher 列表中。
在 Watcher 实例中定义一个回调函数，当被监视的数据发生变化时调用该函数。

class Watcher {
  constructor(vm, expOrFn, cb) {
    this.vm = vm;
    this.expOrFn = expOrFn;
    this.cb = cb;
    this.value = this.get();
  }

  get() {
    Dep.target = this;
    const value = this.expOrFn.call(this.vm);
    Dep.target = null;
    return value;
  }

  update() {
    const value = this.get();
    if (value !== this.value) {
      this.cb.call(this.vm, value, this.value);
      this.value = value;
    }
  }
}

getter 和 immediate

watch 可以配置 getter 函数，getter 函数会立即被调用，并且在数据发生变化时再次被调用。immediate 选项指定是否在 Watcher 创建时立即调用回调函数。

watch: {
  name: {
    handler(newValue, oldValue) {
      // do something
    },
    immediate: true // 立即调用
  }
}

总结

watch 是 Vue3 响应式系统中一种强大的工具，它允许我们对数据变化进行响应。watch 的实现涉及创建 Watcher 实例、定义回调函数和 getter 函数，以及处理 immediate 选项。通过理解 watch 的实现原理，我们可以更好地利用 Vue3 的响应式系统来构建高效、响应良好的应用程序。