vue 3 中watch 和watchEffect 的新用法

下面我就来讲解 "Vue 3 中 watch 和 watchEffect 的新用法" 的完整攻略。

1. 简介

在Vue 3中，watch 和 watchEffect 的用法得到了很大的改进。 在Vue 2中，watch 选项和 watch 函数要么立即执行要么需要手动设置 immediate 选项才能立即执行。如果你只是需要在数据变化时立即执行一段代码，那么Vue3中的 watchEffect 就可以胜任了；watchEffect 可以自动追踪依赖，并且只在依赖变化时执行代码。下面就对这两种新用法做详细的解释。

2. watchEffect

2.1 定义

watchEffect 会自动追踪依赖，并在其中任何一个依赖项改变时重新运行该函数。 这个 API 在一般情况下与 computed 很相似，但是它只接受一个函数作为其唯一的参数。它实际上是在内部执行了一个effect，代表一个可响应计算属性，任何 effect 的返回值都会自动成为它的返回值输出。

2.2 示例

例如，有以下的代码：

import { watchEffect, reactive } from 'vue'

const state = reactive({
  count: 0,
  doubleCount: 0
})

watchEffect(() => {
  state.doubleCount = state.count * 2
})

console.log(state.doubleCount) // output: 0

state.count ++

console.log(state.doubleCount) // output: 2

以上代码中，我们定义了一个 state 对象，其中包含两个属性 count 和 doubleCount，count 的变化会影响到 doubleCount。我们使用 watchEffect 监听 state 对象上属性 count 的变化，并使用其更新另一个属性 doubleCount，最后在控制台输出了 state.doubleCount 的值。我们可以看到，当 state.count 的值从0变为1时，state.doubleCount 的值也相应地从0变为了2。

3. watch

3.1 定义

在 Vue 3 中， watch 选项可以接受一个纯函数或一个函数体，用来监听被观察属性的变化并执行一些副作用。watch会在创建时执行第一次，而类似于 Vue2 中手动添加的 immediate 选项，watch 可以接受一个 immediate 选项以立即执行一次函数并进入这个函数后的侦听模式。除了 immediate 选项外，watch 还包含了一些其他的选项来改变它的行为。

3.2 示例

import { watch, reactive } from 'vue'

const state = reactive({
  count: 0,
  doubleCount: 0
})

watch(() => state.count, (newValue, oldValue) => {
  state.doubleCount = newValue * 2
})

console.log(state.doubleCount) // output: 0

state.count ++

console.log(state.doubleCount) // output: 2

以上代码中，我们同样使用了一个 state 对象，其中包含了两个属性 count 和 doubleCount。我们使用 watch 监听 count 的变化，并在回调函数中更新 doubleCount，最后还是输出了 doubleCount。可以发现，和 watchEffect 一样，另一个属性 doubleCount 已经被正确的计算出来了。

4. 总结

Vue 3 提供了更灵活、更简单的 watch 和 watchEffect 的新用法。将组件与数据更好的进行分离，使得开发更简易化。watchEffect 更方便，如果只是需要在数据变化时立即执行一段代码就可以使用，而 watch 可以更灵活地监听多个数据，并缩小监听范围，仅在所需要的情况下执行回调函数。这为我们开发私人定制提供了更多的实现方式。