vue中wacth监听器的底层详细讲解

Vue.js 中的 Wacth 监听器是其响应式系统的一个核心特性，它允许开发者指定当某个数据变化时执行的回调函数。要深入理解 Wacth 监听器的底层原理，我们需要先了解 Vue 的响应式系统是如何工作的。

Vue 响应式系统的基本原理

1. 依赖收集:

   • 当一个 Vue 组件实例被创建时，它会遍历在 data 选项中找到的所有属性，并使用Object.definProperty将它们转换为 getter/setter。
   • 这个过程中，Vue 能够追踪哪些组件正在观察这个属性（即“依赖收集”）。

2. 依赖追踪:

   • 当属性被访问（getter 被调用）时，Vue 会记录当前组件为该属性的依赖。
   • 当属性被修改（setter 被调用）时，Vue 会通知所有依赖这个属性的组件重新渲染。

Watch 监听器的工作原理

1. 声明 Watcher:

   • 当声明一个 Wacth 监听器时，Vue 会为被监听的数据创建一个 Wacther 实例。
   • 这个 Wacther 实例会把自己注册到被监听数据的依赖列表中。

2. 响应数据变化:

   • 当被监听的数据发生变化时（setter 被调用），Wacther 会被通知。
   • Wacther 接着执行注册的回调函数，这可以是任何自定义逻辑，如更新 DOM、调用 API 等。

3. 异步更新队列:

   • Vue 使用一个异步队列来管理所有的 DOM 更新和 Wacther 回调。
   • 这意味着在同一事件循环中，数据可能改变多次，但 Vue 会将所有的 DOM 更新和 Wacther  回调压缩成一次处理，以提高性能。

4. 深度监听和计算属性:

   • Wacth 还支持对对象的深度监听，通过设置 deep: true  选项，Vue 将递归遍历该对象的所有属性进行依赖收集。
   • 相比之下，计算属性（computed properties）是基于它们的依赖自动更新的，它们也使用 Wacther 实例，但是以不同的方式。

关键点

• Wacth 监听器是基于 Vue 的响应式系统实现的，它使用 Wacth 实例来追踪数据的变化。
• Vue 的响应式系统通过 Object.definProperty 实现属性的 getter 和 setter，从而能够追踪数据的读取和修改。
• 使用 Wacth 监听器可以执行复杂的自定义逻辑，但要注意性能问题，尤其是在监听大型对象或数组时。