用最简单的方式理解 Vue.js 的响应式系统

2023-10-16 02:31:49





Vue.js 的响应式系统是其核心功能之一，它允许开发者轻松地构建动态交互的 Web 应用。在 Vue.js 中，数据被包装成响应式对象，当数据发生改变时，系统会自动更新与该数据绑定的视图。这使得开发者无需手动更新视图，大大简化了开发过程。

Vue.js 提供了多种方式来实现响应式编程，其中 watch 和 watchEffect 是两种常用的方法。本文将深入剖析 watch 和 watchEffect 的作用和用法，帮助读者掌握响应式编程的精髓。

## watch

watch 是一个侦听器，它可以监视一个或多个响应式数据，当这些数据发生改变时，watch 会触发相应的回调函数。watch 的基本语法如下：

```javascript
watch(source, callback, options)

其中：

source：要监视的响应式数据或计算属性。
callback：当 source 发生改变时触发的回调函数。
options：可选参数，可以指定 watch 的行为。

watch 的 callback 函数可以接收两个参数：

newValue：source 的新值。
oldValue：source 的旧值。

watch 的 options 参数可以指定以下选项：

immediate：如果为 true，则在 watch 创建时立即触发一次回调函数。
deep：如果为 true，则 watch 将深度监视 source，这意味着 source 中任何嵌套对象的改变都会触发回调函数。

watchEffect

watchEffect 是一个计算属性，它可以追踪响应式依赖，并在追踪的时候自动触发一次，后序检测到响应式依赖的话，会再次更新，注意所有的里面的响应式数据（ref/reactive）都会自动被加入依赖中。watchEffect 的基本语法如下：

watchEffect(callback)

其中：

callback：watchEffect 的回调函数。

watchEffect 的 callback 函数可以接收一个参数：

effect：一个包含当前所有响应式依赖的集合。

watchEffect 的 callback 函数会在以下情况下触发：

在 watchEffect 创建时。
当 watchEffect 的任何响应式依赖发生改变时。

watch 和 watchEffect 的区别

watch 和 watchEffect 是 Vue.js 中实现响应式编程的两种常用方法，它们的区别主要在于：

watch 是一个侦听器，它可以监视一个或多个响应式数据，当这些数据发生改变时，watch 会触发相应的回调函数。
watchEffect 是一个计算属性，它可以追踪响应式依赖，并在追踪的时候自动触发一次，后序检测到响应式依赖的话，会再次更新，注意所有的里面的响应式数据（ref/reactive）都会自动被加入依赖中。

一般来说，watch 更适合用于监视单个或少量响应式数据，而 watchEffect 更适合用于追踪大量响应式依赖。