Vue响应式中的渲染 watcher

在Vue中，响应式系统是通过使用Watcher来实现的。Watcher可以观察数据的变化，并且在数据发生变化时重新渲染相关组件或视图。

在Vue的响应式系统中，有三种主要类型的Watcher，分别是：

1. 渲染Watcher（Render Watcher）：用于观察和处理组件的渲染过程。当组件中的响应式数据发生变化时，渲染Watcher会重新执行组件的render函数，并更新组件的DOM结构。
2. 计算Watcher（Computed Watcher）：用于观察和处理计算属性的变化。计算Watcher会在计算属性所依赖的响应式数据发生变化时重新计算计算属性的值，并将新的值缓存起来。
3. 侦听器Watcher（Watcher）：用于观察和处理侦听器的变化。侦听器Watcher会在侦听的属性发生变化时执行绑定的回调函数。

在Vue的组件渲染过程中，会创建一个渲染Watcher，并将组件的render函数作为初始化参数传给渲染Watcher。当组件的响应式数据发生变化时，渲染Watcher会调用组件的render函数，并将新的VNode（虚拟DOM节点）与旧的VNode进行对比，然后更新组件的DOM结构。

在Vue的实现中，渲染Watcher是通过watcher函数来创建的。具体的创建过程包括以下几个步骤：

1. 首先，会创建一个渲染Watcher对象，并将渲染函数作为参数传入。
2. 然后，会调用Watcher对象的get方法，在该方法中会先调用pushTarget方法将当前Watcher对象设置为全局的目标Watcher对象。
3. 接着，会调用渲染函数，此时会访问组件中的响应式数据，从而触发对应响应式数据的getter方法。在getter方法中会将当前Watcher对象添加到响应式数据的依赖列表中，并将响应式数据的值返回给渲染函数。
4. 最后，会调用popTarget方法将当前Watcher对象从全局的目标Watcher对象中移除。

当响应式数据发生变化时，会触发对应响应式数据的setter方法，setter方法会通知依赖列表中的所有Watcher对象执行其回调函数。对于渲染Watcher来说，就是重新执行组件的render函数，并将新的VNode与旧的VNode进行对比来更新DOM结构。

总结一下，Vue中的响应式系统是通过使用Watcher来实现的，其中渲染Watcher负责观察和处理组件的渲染过程。当组件的响应式数据发生变化时，渲染Watcher会重新执行组件的render函数，并将新的VNode与旧的VNode进行对比来更新DOM结构。