Vue3中watch用法

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

watch 基本使用

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

const message = ref(0)
watch(message, (newValue, oldValue) => {
  console.log('新的值:', newValue)
  console.log('旧的值:', oldValue)
})
const changeMsg = () => {
  message.value++
}
</script>
<template>
  <p>{{ message }}</p>
  <button @click="changeMsg">更改 message</button>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

watch 监听类型

ref 和计算属性

<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)
  console.log('旧的值:', oldValue)
})
const changeCount = () => {
  count.value++
}
</script>
<template>
  <p>{{ count }}</p>
  <button @click="changeCount">更改 count</button>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

getter 函数

<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)
    console.log('旧的值:', oldValue)
  }
)
const changeCount = () => {
  count.value++
}
</script>
<template>
  <p>{{ count }}</p>
  <button @click="changeCount">更改 count</button>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

监听响应式对象

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

const count = reactive({ num: 0 })
watch(count, (newValue, oldValue) => {
  console.log('新的值:', newValue)
  console.log('旧的值:', oldValue)
})
const changeCount = () => {
  count.num++
}
</script>
<template>
  <p>{{ count }}</p>
  <button @click="changeCount">更改 count</button>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

监听多个来源的数组

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

const count = ref(0)
const doubleCount = computed(() => count.value * 2)
watch([count, doubleCount], (newValue, oldValue) => {
  console.log('新的值:', newValue)
  console.log('旧的值:', oldValue)
})
const changeCount = () => {
  count.value++
}
</script>
<template>
  <p>{{ count }}</p>
  <button @click="changeCount">更改 count</button>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

深度监听

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

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

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

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

const count = ref({ num: 0 })
watch(
  count,
  (newValue, oldValue) => {
    console.log('新的值:', newValue)
    console.log('旧的值:', oldValue)
  }
)
const changeCount = () => {
  count.value.num++
}
</script>
<template>
  <p>{{ count }}</p>
  <button @click="changeCount">更改 count</button>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

上段代码中我们使用 ref响应式对象，当我们更改 number 中 count 的值时，watch 的回调函数是不会执行的。

为了实现上述代码的监听，我们可以手动给监听器加上深度监听的效果。

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

const count = ref({ num: 0 })
watch(
  count,
  (newValue, oldValue) => {
    console.log('新的值:', newValue)
    console.log('旧的值:', oldValue)
  },
  { deep: true }
)
const changeCount = () => {
  count.value.num++
}
</script>
<template>
  <p>{{ count }}</p>
  <button @click="changeCount">更改 count</button>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

immediate

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

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

const count = ref({ num: 0 })
watch(
  count,
  (newValue, oldValue) => {
    console.log('新的值:', newValue)
    console.log('旧的值:', oldValue)
  },
  { immediate: true }
)
const changeCount = () => {
  count.value.num++
}
</script>
<template>
  <p>{{ count }}</p>
  <button @click="changeCount">更改 count</button>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

watch监听回调函数会再创建时立即执行

提示

前面我们一直强调 watch 监听的是响应式数据，如果我们监听的数据不是响应式的，那么可能会抛出如下警告：

runtime-core.esm-bundler.js:41 [Vue warn]: Invalid watch source:  123 A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types. 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <ElMain> 
  at <ElContainer> 
  at <ElContainer class="layout-container" > 
  at <LayoutPage onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) > > 
  at <RouterView> 
  at <App>
1
2
3
4
5
6
7
8
9

---