vuewatcher原理（vue watch源码）

## Vue Watcher 原理详解

简介

Vue.js 的响应式系统是其核心功能之一，而 `Watcher` 是这个系统中的关键组件。它负责追踪依赖的数据变化，并在数据发生变化时更新相应的视图。理解 `Watcher` 的原理对于深入掌握 Vue.js 的响应式机制至关重要。 本文将深入探讨 Vue Watcher 的内部机制以及其运作流程。### 1. 数据劫持与依赖收集Vue.js 的响应式系统依赖于 `Object.defineProperty()` (对于ES5兼容的环境) 或 `Proxy` (现代浏览器环境) 来实现数据劫持。当一个 Vue 实例被创建时，其 `data` 对象中的所有属性都会被遍历，并使用 `Object.defineProperty()` 或 `Proxy` 为其添加 `getter` 和 `setter`。

`getter`:

当访问一个响应式属性时，`getter` 会被触发。在这个过程中，`Watcher` 会将自身注册到该属性的依赖列表中。这被称为

依赖收集

。 每个属性都维护着一个依赖列表，记录了所有依赖于该属性的 `Watcher` 实例。

`setter`:

当修改一个响应式属性时，`setter` 会被触发。它会通知所有依赖于该属性的 `Watcher`，使其执行更新操作。### 2. Watcher 的类型Vue.js 中主要有三种类型的 `Watcher`：#### 2.1. `Computed Watcher``Computed Watcher` 用于计算属性。它依赖于其他响应式属性，只有当其依赖的属性发生变化时才会重新计算其值。 `Computed Watcher` 具有缓存机制，只有在依赖发生变化时才会重新计算，提高了性能。 其特点是：

惰性求值:

只有在第一次访问或依赖发生变化时才计算值。

缓存:

缓存计算结果，避免重复计算。#### 2.2. `Watch Watcher``Watch Watcher` 用于监听特定属性的变化。开发者可以通过 `$watch` API 来创建 `Watch Watcher`，并在属性变化时执行自定义的回调函数。与 `Computed Watcher` 不同的是，`Watch Watcher` 不缓存计算结果，每次属性变化都会执行回调函数。 其特点是：

实时监听:

属性值改变时立即触发回调。

自定义回调:

允许开发者编写自定义逻辑来处理属性变化。#### 2.3. `Render Watcher``Render Watcher` 是 Vue.js 内部使用的 `Watcher`，它负责渲染视图。当数据发生变化时，`Render Watcher` 会重新渲染视图，将数据变化反映到 UI 上。 它只包含一个依赖：`_render` 函数。 每个组件都有一个 `Render Watcher`。### 3. 更新流程当一个响应式属性的值发生变化时，以下步骤会依次执行：1.

触发 `setter`:

修改属性的值会触发 `setter` 方法。 2.

通知依赖:

`setter` 方法会通知所有依赖于该属性的 `Watcher`。 3.

更新队列:

`Watcher` 实例会被添加到一个更新队列中。 4.

批量更新:

Vue.js 使用异步队列机制，在下一个事件循环中批量更新所有 `Watcher`，避免不必要的重复更新。 5.

重新渲染:

`Render Watcher` 会触发视图的重新渲染。### 4. 总结Vue Watcher 是 Vue.js 响应式系统的重要组成部分，它通过数据劫持、依赖收集和异步更新机制，高效地实现了数据变化与视图更新的同步。 理解不同类型的 `Watcher` 及其工作机制，有助于我们更好地理解和使用 Vue.js 的响应式特性，编写更高效和可维护的 Vue 应用。 此外，深入理解其原理也能帮助我们更好地调试和优化性能问题。

Vue Watcher 原理详解**简介**Vue.js 的响应式系统是其核心功能之一，而 `Watcher` 是这个系统中的关键组件。它负责追踪依赖的数据变化，并在数据发生变化时更新相应的视图。理解 `Watcher` 的原理对于深入掌握 Vue.js 的响应式机制至关重要。 本文将深入探讨 Vue Watcher 的内部机制以及其运作流程。

1. 数据劫持与依赖收集Vue.js 的响应式系统依赖于 `Object.defineProperty()` (对于ES5兼容的环境) 或 `Proxy` (现代浏览器环境) 来实现数据劫持。当一个 Vue 实例被创建时，其 `data` 对象中的所有属性都会被遍历，并使用 `Object.defineProperty()` 或 `Proxy` 为其添加 `getter` 和 `setter`。* **`getter`:** 当访问一个响应式属性时，`getter` 会被触发。在这个过程中，`Watcher` 会将自身注册到该属性的依赖列表中。这被称为**依赖收集**。 每个属性都维护着一个依赖列表，记录了所有依赖于该属性的 `Watcher` 实例。* **`setter`:** 当修改一个响应式属性时，`setter` 会被触发。它会通知所有依赖于该属性的 `Watcher`，使其执行更新操作。

2. Watcher 的类型Vue.js 中主要有三种类型的 `Watcher`：

2.1. `Computed Watcher``Computed Watcher` 用于计算属性。它依赖于其他响应式属性，只有当其依赖的属性发生变化时才会重新计算其值。 `Computed Watcher` 具有缓存机制，只有在依赖发生变化时才会重新计算，提高了性能。 其特点是：* **惰性求值:** 只有在第一次访问或依赖发生变化时才计算值。 * **缓存:** 缓存计算结果，避免重复计算。

2.2. `Watch Watcher``Watch Watcher` 用于监听特定属性的变化。开发者可以通过 `$watch` API 来创建 `Watch Watcher`，并在属性变化时执行自定义的回调函数。与 `Computed Watcher` 不同的是，`Watch Watcher` 不缓存计算结果，每次属性变化都会执行回调函数。 其特点是：* **实时监听:** 属性值改变时立即触发回调。 * **自定义回调:** 允许开发者编写自定义逻辑来处理属性变化。

2.3. `Render Watcher``Render Watcher` 是 Vue.js 内部使用的 `Watcher`，它负责渲染视图。当数据发生变化时，`Render Watcher` 会重新渲染视图，将数据变化反映到 UI 上。 它只包含一个依赖：`_render` 函数。 每个组件都有一个 `Render Watcher`。

3. 更新流程当一个响应式属性的值发生变化时，以下步骤会依次执行：1. **触发 `setter`:** 修改属性的值会触发 `setter` 方法。 2. **通知依赖:** `setter` 方法会通知所有依赖于该属性的 `Watcher`。 3. **更新队列:** `Watcher` 实例会被添加到一个更新队列中。 4. **批量更新:** Vue.js 使用异步队列机制，在下一个事件循环中批量更新所有 `Watcher`，避免不必要的重复更新。 5. **重新渲染:** `Render Watcher` 会触发视图的重新渲染。

4. 总结Vue Watcher 是 Vue.js 响应式系统的重要组成部分，它通过数据劫持、依赖收集和异步更新机制，高效地实现了数据变化与视图更新的同步。 理解不同类型的 `Watcher` 及其工作机制，有助于我们更好地理解和使用 Vue.js 的响应式特性，编写更高效和可维护的 Vue 应用。 此外，深入理解其原理也能帮助我们更好地调试和优化性能问题。