vue中的watcher

前言

Vue 中的 watcher 是一种特殊的对象，它可以订阅响应式数据的变化，并在变化时执行相应的回调函数。

Vue 中有三种类型的 watcher：

• 渲染 watcher 是负责更新视图的 watcher，每个组件实例都有一个对应的渲染 watcher。当组件实例创建时，会创建一个渲染 watcher，并执行组件的 render 函数，同时收集该组件依赖的响应式数据。当这些数据变化时，渲染 watcher 会触发组件重新渲染。
• 计算属性 watcher 是负责执行计算属性的 watcher，每个计算属性都有一个对应的计算属性 watcher。当计算属性被访问时，会创建一个计算属性 watcher，并执行计算属性的 getter 函数，同时收集该计算属性依赖的响应式数据。当这些数据变化时，计算属性 watcher 会触发计算属性的重新求值，并通知其依赖的 watcher 更新。
• 用户 watcher 是用户通过 watch API 自定义的 watcher，可以用来监听一个或多个响应式数据，并在数据变化时执行自定义的回调函数。用户可以通过一些选项来配置用户 watcher 的行为，例如 immediate、deep、sync 等。

watcher 被收集的时机主要有以下几种：

• 当组件实例创建时，会创建一个渲染 watcher，并执行组件的 render 函数，此时会触发响应式数据的 getter 函数，将渲染 watcher 收集到数据的依赖列表中。
• 当计算属性被访问时，会创建一个计算属性 watcher，并执行计算属性的 getter 函数，此时会触发响应式数据的 getter 函数，将计算属性 watcher 收集到数据的依赖列表中。
• 当用户通过 watch API 创建一个用户 watcher 时，如果设置了 immediate 选项为 true，会立即执行用户 watcher 的回调函数，此时会触发响应式数据的 getter 函数，将用户 watcher 收集到数据的依赖列表中。
• 当用户通过 watch API 创建一个用户 watcher 时，如果设置了 deep 选项为 true，会对监听的响应式对象进行深度遍历，将用户 watcher 收集到对象的所有嵌套属性的依赖列表中。