Vue源码剖析之Watcher（二）

2023-11-28 14:05:42

Vue.js中Watcher是一个响应式系统的核心，用于侦听数据的变化并触发相应的更新。深入剖析Watcher的内部机制，有助于我们理解Vue.js响应式系统的工作原理。

Watcher与Dep的关系

Watcher与Dep（Dependency）是一种密切相关的关系。Dep收集依赖于它的Watcher，而Watcher则持有它所依赖的Dep集合。当Dep中的数据发生变化时，它会通知所有依赖它的Watcher，从而触发Watcher的更新过程。

关键函数分析

Watcher内部定义了几个关键函数，这些函数负责数据的收集和更新：

get() ：收集依赖，通过遍历数据对象并为每个属性添加Dep。
update() ：当依赖的数据发生变化时，触发更新过程。该函数会重新执行get()方法以收集最新的依赖，并比较新旧依赖之间的差异，从而更新视图。
run() ：手动触发更新过程，通常用于初始化或强制更新。

Watcher的分类

Vue.js中有多种类型的Watcher，每种类型都有其特定的用途：

常规Watcher ：这是最基本的Watcher，用于侦听数据对象的单个属性或多个属性。
渲染Watcher ：专用于视图渲染，用于跟踪视图中使用的所有响应式数据。
computed Watcher ：计算并返回响应式属性的派生值。
lazy Watcher ：只在访问响应式属性时进行更新，优化了视图性能。

剖析示例

为了更好地理解Watcher的内部工作原理，我们分析一个具体的示例：

const vm = new Vue({
  data: {
    message: 'Hello World'
  }
})

const watcher = vm.$watch('message', (newVal, oldVal) => {
  console.log(`Message changed from "${oldVal}" to "${newVal}".`)
})

在这个示例中，我们创建了一个Watcher来侦听message数据的变化。当message数据改变时，Watcher将触发回调函数并打印出新旧值。

总结

Vue.js中的Watcher是响应式系统的重要组成部分，负责收集依赖数据并触发更新。理解Watcher与Dep的关系以及不同类型Watcher的功能，对于深入了解Vue.js的响应式系统至关重要。通过剖析Watcher的内部机制，我们可以更好地理解Vue.js如何高效地管理数据变化并保持视图的更新。