vue3中watch的用法及讲解

当我们在Vue 3应用程序中想要监听数据的变化时，可以使用 watch 函数。watch 函数支持多种用法，包括监听响应式对象、计算属性、ref 对象等等。

下面我们就来详细讲解一下 watch 函数的用法。

监听响应式对象

watch 函数可以通过监听一个响应式对象来实现数据的实时更新。例如:

import { reactive, watch } from 'vue'

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

watch(
  () => state.count,
  (newCount, oldCount) => {
    console.log(`count发生了变化：${oldCount} -> ${newCount}`)
  }
)

state.count++ // 输出 "count发生了变化：0 -> 1"

在上面的代码中，我们首先通过 reactive 函数创建了一个响应式对象 state，并定义了一个属性 count。接着，使用 watch 函数来监听 state.count 的变化，当 count 值发生变化时，输出日志信息。

在每次修改 count 值时，会触发 watch 里的回调函数，并输出相应的日志信息。

需要注意的是，当监听的值是一个对象或数组时，只能监听到对象或数组引用的变化，而不能监听到对象或数组内部某个具体属性的变化（这种情况可以使用深度监听）。

监听计算属性

除了监听响应式对象，我们还可以使用 watch 函数来监听计算属性的变化。例如：

import { ref, computed, watch } from 'vue'

const count = ref(0)
const doubleCount = computed(() => count.value * 2)

watch(
  () => doubleCount.value,
  (newDoubleCount, oldDoubleCount) => {
    console.log(`doubleCount发生了变化：${oldDoubleCount} -> ${newDoubleCount}`)
  }
)

count.value++ // 输出 "doubleCount发生了变化：0 -> 2"

在上面的代码中，我们首先创建了一个 ref 类型的变量 count，以及一个计算属性 doubleCount，它是 count 值的两倍。

接着，使用 watch 函数来监听 doubleCount 的变化，并输出日志信息。

当 count 值发生变化时，会触发计算属性 doubleCount 的重新计算，然后再触发 watch 回调函数。

监听多个值

除了监听单个值，我们也可以使用 watch 函数来监听多个数据的变化。例如：

import { ref, watch } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

watch([firstName, lastName], ([newFirstName, newLastName], [oldFirstName, oldLastName]) => {
  console.log(`姓名发生了变化：${oldFirstName} ${oldLastName} -> ${newFirstName} ${newLastName}`)
})

firstName.value = 'Jane' // 输出 "姓名发生了变化：John Doe -> Jane Doe"
lastName.value = 'Smith' // 输出 "姓名发生了变化：Jane Doe -> Jane Smith"

在上面的代码中，我们创建了两个 ref 类型的变量 firstName 和 lastName，并使用 watch 函数来监听它们的变化。当其中任何一个变量发生变化时，输出日志信息。

需要注意的是，在回调函数中，newValues 和 oldValues 分别表示新的和旧的值数组，这些值是按照 watch 函数第一个参数数组的顺序排列的。

监听深度对象

当我们需要监听一个嵌套较深的响应式对象的变化时，可以使用 watch 函数的 deep 选项来实现。例如：

import { reactive, watch } from 'vue'

const state = reactive({
  user: {
    name: 'John',
    age: 30,
    address: {
      city: 'Los Angeles',
      street: '123 Main St',
      zip: '90001'
    }
  }
})

watch(
  () => state,
  (newState, oldState) => {
    console.log(`state对象发生了变化`)
  },
  { deep: true }
)

state.user.address.city = 'New York' // 输出 "state对象发生了变化"

在上面的代码中，我们创建了一个较为复杂的嵌套响应式对象 `state`，其中包含一个 `user` 对象和一个 `address` 对象。接着，使用 `watch` 函数来监听整个 `state` 对象的变化，并输出日志信息。 需要注意的是，在 `watch` 函数中，如果我们想要监听嵌套对象的变化，则需要设置选项 `{ deep: true }`。这样在每次嵌套对象内部值发生变化时，都会触发回调函数。

小结

在Vue 3中， `watch` 函数提供了丰富的用法，可以用于监听各种类型的数据变化。通过 `watch` 函数，我们可以在数据发生变化时执行一些自定义的操作，从而实现更加灵活的业务逻辑。 需要注意的是，在使用 `watch` 函数时，我们要合理选择监听的目标以及回调函数的执行时机，避免出现性能问题。

希望本篇文章能够对你了解Vue 3中 `watch` 函数有所帮助！