Vue3中的watch和watchEffect实例详解

在Vue3中，watch和watchEffect可以定义响应式数据的副作用。本文会详细讲解两者的区别和使用方式，并给出几个实例示例说明。

watch

watch的基本用法是：当数据发生变化时执行一个函数。可以用来监听单个数据的变化，也可以监听多个数据。

监听单个数据

监听单个数据可以通过$watch函数或者watch选项实现。

$watch函数

$watch函数使用非常灵活，可以监听响应式数据的任何变化。以下是通过$watch监听一个数据变化的例子：

const { ref } = Vue
const count = ref(0)

const unwatch = appContext.app.$watch(count, (newValue, oldValue) => {
  console.log(`count从${oldValue}变成了${newValue}`)
})

setTimeout(() => {
  count.value++
}, 1000)

// 1秒后，输出：count从0变成了1

这里定义了一个count的响应式数据，然后通过$watch监听这个数据的变化。当count发生变化时，会执行传入的函数。

watch选项

如果需要在组件内监听数据变化时，可以使用watch选项。

const { ref, defineComponent } = Vue

export default defineComponent({
  setup() {
    const count = ref(0)

    watch(count, (newValue, oldValue) => {
      console.log(`count从${oldValue}变成了${newValue}`)
    })

    setTimeout(() => {
      count.value++
    }, 1000)

    return {
      count
    }
  }
})

这里通过监听count的变化打印出了新旧值。

监听多个数据

可以通过监听对象的方式监听多个数据，也可以使用深度监听。

监听对象

监听对象时，可以直接把对象传给$watch或watch选项。这里有一个示例：

const { ref } = Vue

const user = ref({ name: 'Jhon', age: 18 })

appContext.app.$watch(user, (newValue, oldValue) => {
  console.log(`user从${JSON.stringify(oldValue)}变成了${JSON.stringify(newValue)}`)
}, { deep: true })

setTimeout(() => {
  user.value.age++
}, 1000)

// 1秒后，输出：user从{"name":"Jhon","age":18}变成了{"name":"Jhon","age":19}

以上代码中，我们监听了一个对象user的变化。当user中的任意一个属性发生变化时，都会触发函数执行。

深度监听

通过deep选项可以实现深度监听，也就是在对象中有内部属性改变的情况下能够进行监听。

const { ref, watch } = Vue

const user = ref({ name: 'Jhon', age: { num: 18 } })

watch(user, (newValue, oldValue) => {
  console.log(`user从${JSON.stringify(oldValue)}变成了${JSON.stringify(newValue)}`)
}, { deep: true })

setTimeout(() => {
  user.value.age.num++
}, 1000)

// 1秒后，输出：user从{"name":"Jhon","age":{"num":18}}变成了{"name":"Jhon","age":{"num":19}}

watchEffect

watchEffect会自动追踪响应式数据的依赖，当其依赖（包括直接依赖和间接依赖）发生变化时，就会重新计算并执行提供的函数。本质上，watchEffect是一个将响应式数据和函数包装在一起的函数。因此，根据watchEffect理念，我们可以很轻松地实现一个计算属性。

const { ref, watchEffect } = Vue

const name = ref('Jhon')
const age = ref(18)

const fullName = watchEffect(() => {
  return `${name.value}，${age.value}岁`
})

console.log(fullName) // 'Jhon，18岁'

setTimeout(() => {
  age.value++
}, 1000)

// 1秒后，输出：'Jhon，19岁'

以上代码中，我们定义了两个响应式数据name和age，然后通过watchEffect包装一个函数，返回一个计算属性。当age发生改变时，计算属性会重新计算并输出结果。

小结

• watch和watchEffect可以对响应式数据进行监听，用来实现响应式数据的副作用。
• watch用来监听单个或多个数据的变化，相对灵活，而watchEffect是一个将响应式数据和函数包装在一起的函数，自动追踪响应式数据的依赖，很适合实现计算属性。
• watch()和watchEffect()函数钩子的第二参数的确切使用方法是可以通过一个函数来监听多个值的改变。记得添加{deep: true}来启用监听深层次对象里的变化。