Vue3中watch用法

在 Vue3 中的组合式 API 中，watch 的作用和 Vue2 中的 watch 作用是一样的，他们都是用来监听响应式状态发生变化的，当响应式状态发生变化时，都会触发一个回调函数。
当需要在数据变化时执行异步或开销较大的操作时，computed是无法操作异步数据的，所以需要使用watch进行侦听。
侦听器watch作用是侦听一个或多个数据的变化，数据变化时执行的回调函数，两个额外参数：immediate（立即执行）和deep（深度侦听）

watch 基本使用

<template>
  <p>{{ message }}</p>
  <button @click="changeMsg">更改 message</button>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

const message = ref(0)
watch(message, (newValue, oldValue) => {
  console.log('newValue:', newValue)
  console.log('oldValue:', oldValue)
})
const changeMsg = () => {
  message.value++
}
</script>

上段代码中我们点击按钮就会更改响应式变量 message 的值。我们又使用 watch 监听器监听了 message 变量，当它发生变化时，就会触发 watch 监听函数中的回调函数，并且回调函数默认接收两个参数：新值和旧值。

watch 监听类型

ref 和计算属性

<template>
  <p>{{ count }}</p>
  <button @click="changeCount">更改 count</button>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'

const count = ref(0)
const doubleCount = computed(() => count.value * 2)
watch(doubleCount, (newValue, oldValue) => {
  console.log('newValue:', newValue)
  console.log('oldValue:', oldValue)
})
const changeCount = () => {
  count.value++
}
</script>

当我们 count 发生变化时，计算属性 doubleCount也会重新计算得出新的结果，我们 watch 监听函数是可以监听到计算属性变化的。

getter 函数

<template>
  <p>{{ count }}</p>
  <button @click="changeCount">更改 count</button>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'

const count = ref(0)
const doubleCount = computed(() => count.value * 2)
watch(
  () => count.value + doubleCount.value,
  (newValue, oldValue) => {
    console.log('newValue:', newValue)
    console.log('oldValue:', oldValue)
  }
)
const changeCount = () => {
  count.value++
}
</script>

上段代码中 watch 监听器中的第一个参数是一个箭头函数，也就是 getter 函数，getter 函数返回的是响应式数据 count 和 doubleCount 相加的值，当这两个中中有一个变化，都会执行 watch 中的回调函数。有点像是直接把计算属性写到监听器里面去了。

监听响应式对象

<template>
  <p>{{ count }}</p>
  <button @click="changeCount">更改 count</button>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue'

const count = reactive({ num: 0 })
watch(count, (newValue, oldValue) => {
  console.log('newValue:', newValue)
  console.log('oldValue:', oldValue)
})
const changeCount = () => {
  count.num++
}
</script>

当 watch 监听的是一个响应式对象时，会隐式地创建一个深层侦听器，即该响应式对象里面的任何属性发生变化，都会触发监听函数中的回调函数。

深度监听

在前面的代码中，如果我们将一个响应式对象传递给 watch 监听器时，只要对象里面的某个属性发生了变化，那么就会执行监听器回调函数。

究其原因，因为我们传入响应对象给 watch 时，隐式的添加一个深度监听器，这就让我们造成了我们牵一发而至全身的效果。

但是，如果我们是使用的 ref响应式对象的形式，那么响应式对象的属性值发生变化，是不会触发 watch 的回调函数的。

<template>
  <p>{{ count }}</p>
  <button @click="changeCount">更改 count</button>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'

const count = ref({ num: 0 })
watch(
  count,
  (newValue, oldValue) => {
    console.log('newValue:', newValue)
    console.log('oldValue:', oldValue)
  }
)
const changeCount = () => {
  count.value.num++
}
</script>

我们使用 ref响应式对象，当我们更改 number 中 count 的值时，watch 的回调函数是不会执行的。为了实现上述代码的监听，我们可以手动给监听器加上深度监听的效果。

watch(
  count,
  (newValue, oldValue) => {
    console.log('newValue:', newValue)
    console.log('oldValue:', oldValue)
  },
  { deep: true }
)

immediate

在侦听器创建时立即触发回调，响应式数据变化之后继续执行回调