Vue 3 源码探索：简述 watch 的实现机制

前端

2023-11-02 07:57:09

在 Vue 3 的响应式系统中，watch API 扮演着举足轻重的角色，它允许开发者监控响应式数据的变化并相应地执行回调函数。为了深入理解 watch 的工作原理，本文将带你踏上一段源码探索之旅，深入浅出地剖析其内部实现机制。

响应式系统与 watch API

在 Vue 3 中，响应式系统是应用程序的核心，它通过追踪依赖关系来有效地更新视图。当响应式数据发生变化时，系统会触发更新，并重新渲染受影响的组件。

watch API 则是构建在响应式系统之上的，它提供了一种便捷的方式来侦听特定响应式数据的变化。当被监视的数据发生变化时，watch API 会执行指定的回调函数，从而触发相应的业务逻辑。

watch 的内部实现

要理解 watch 的实现，我们首先需要了解依赖收集和触发器这两个关键概念：

依赖收集： 当一个组件或函数访问响应式数据时，Vue 3 会自动收集该组件或函数对该数据的依赖关系。这些依赖关系将被存储在一个名为 "依赖栈" 的数据结构中。
触发器： 每个响应式属性都与一个触发器相关联。当该属性的值发生变化时，触发器将被调用，触发一系列更新操作，包括重新渲染和执行 watch 回调函数。

watch 函数的实现如下：

export function watch(source, cb, options) {
  // ... 省略部分代码
  
  let getter
  if (typeCheckCache[type].get) {
    getter = () => typeCheckCache[type].get(source)
  } else if (isRef(source)) {
    getter = () => source.value
  } else if (isReactive(source)) {
    getter = () => source
  } else {
    getter = () => {
      return source.value
    }
  }
  
  let value, lastValue
  return (...args) => {
    let newValue = getter()
    
    if (deep) {
      if (options.lazy) {
        value = newValue
      } else if (objectEquals(newValue, lastValue)) {
        return
      }
    } else if (!objectEquals(newValue, lastValue)) {
      value = newValue
    }

    lastValue = newValue
    cb(value, lastValue, args)
  }
}

剖析 watch 的实现

watch 函数的实现主要包含以下步骤：

获取 getter 函数： watch 函数首先会根据不同的 source 类型生成一个 getter 函数，该函数用于获取响应式数据的当前值。
收集依赖： 当 watch 回调函数被调用时，它会执行 getter 函数并收集当前依赖栈中所有组件和函数对响应式数据的依赖关系。
创建触发器： 对于被监视的响应式数据，Vue 3 会创建或更新一个触发器。触发器将与 watch 回调函数相关联。
更新值： 当被监视的响应式数据发生变化时，触发器将被调用，并更新 watch 回调函数中存储的值。
执行回调： 如果 watch 回调函数中存储的值发生了变化，watch 回调函数将被重新执行。

通过这种方式，watch API 可以有效地监控响应式数据的变化，并触发相应的回调函数。

编写自定义 watch 函数

除了使用内置的 watch API，开发者还可以编写自定义的 watch 函数来满足更复杂的场景。例如，以下代码演示了如何编写一个仅在响应式数组长度发生变化时才执行的自定义 watch 函数：

function customWatch(source, cb) {
  let value = source.value.length
  return watch(
    () => source.value.length,
    (newVal, oldVal) => {
      if (newVal !== oldVal) {
        cb(newVal, oldVal)
      }
    }
  )
}