vue 3：监听器
目录
1. 基本概念
2. 侦听数据源类型
1. 监听getter函数
2. 监听 ref 或 reactive 的引用
3. 多个来源组成的数组
4. 避免直接传递值！！！
3. 深层侦听器
4. 立即回调的侦听器
5. 一次性侦听器
6. watchEffect()
7. 暂停、恢复和停止侦听器
8. 清理副作用
1. watch
2. watchEffect
1. 基本概念
在 Vue.js 中，**监听器（watchers）**是一种用于监听数据变化并在变化发生时执行相应操作的功能。监听器通常用于执行异步操作或复杂的逻辑计算，例如：监控数据变化，发起 API 请求，执行深层次的对象或数组变化监听等。
<template>
<el-card>
<p>{{ num }}</p>
<input placeholder="Enter" type="text" v-model.lazy="num" />
</el-card>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
const num = ref(1)
// watch接收两个参数（数据源，回调函数）
watch(num, (newVal, oldVal) => {
console.log(newVal, oldVal)
})
// 回调函数接收两个参数（新值，旧值）
</script>
上面的例子中，当input发生change事件时，num的值value会改变，同时监听器会监听到num的变化，并触发回调函数
2. 侦听数据源类型
watch 的第一个参数（ "数据源"），形式上可以是ref，computed，reactive，getter，props或响应式对象。但本质上 必须是一个 getter 函数。这个限制是为了确保 watch 能够正确地监听数据的变化，同时提供更精确和高效的响应式更新。
1. 监听getter函数
const num1 = ref(1)
const num2 = ref(1)
watch(
() => num1.value + num2.value,
(a, b) => {
console.log(a, b)
},
)2. 监听 ref 或 reactive 的引用
如果监听的对象是 ref 或 reactive 创建的引用，可以直接传入。
const count = ref(0);
watch(
count, // 直接传递 ref 引用
(newCount, oldCount) => {
console.log(`Count changed from ${oldCount} to ${newCount}`);
}
)3. 多个来源组成的数组
watch([num1, () => num2.value], ([new1, new2], [old1, old2]) => {
console.log(new1, new2, old1, old2)
})4. 避免直接传递值！！！
如果传递的是非响应式的普通值，Vue 无法监听它的变化。例如，
const state = reactive({
user: { name: 'Alice', age: 25 },
})
watch(state.user.name, (newName, oldName) => {
console.log(`User name changed from ${oldName} to ${newName}`)
})控制台警告，并且并不能监听到 state.user.name的变化
传递 state.user.name 而不是 () => state.user.name ，因为此时 watch 直接接收了一个静态值，而不是可变的引用或 getter。
查了一下大概的原因：
因为watch底层逻辑依赖了proxy代理，而静态值不能被proxy代理的。
而之所以不用普通对象，而是用函数对象，则是和vue的响应式系统的依赖跟踪与收集有关。
PS：这种坑很容易在props传值的时候踩
const props = defineProps({
msg: {
type: String,
default: 'hello world',
},
})
watch(
() => props.msg,
(newVal, oldVal) => {
console.log(newVal, oldVal)
},
)3. 深层侦听器
官方：直接给 watch() 传入一个响应式对象，会隐式地创建一个深层侦听器——该回调函数在所有嵌套的变更时都会被触发
const count = reactive({
num1: 0,
num2: {
a: 1,
b: 2,
},
})
watch(count, (newNum, oldNum) => {
console.log(`Count changed from ${oldNum} to ${newNum}`)
console.log(oldNum, newNum)
})上面代码中，当num1或num2中的a、b发生改变时，打印的结果是
因为监听的数据源是一个对象，那么即使监听到对象持有值变了，新旧值也都是数据源对象的地址。与之相对，无论是对象的哪一个内容变化了，都相当于该对象变化了。
那如果我们监听num2呢
watch(count.num2, (newNum, oldNum) => {
console.log(`Count changed from ${oldNum} to ${newNum}`)
console.log(oldNum, newNum)
})
当然，同理，无论a还是b改变，都会被监听到。因为reactive也让num2具有了响应性
那如果我们使用getter来监听num2呢？
watch(
() => count.num2,
(newNum, oldNum) => {
console.log(`Count changed from ${oldNum} to ${newNum}`)
console.log(oldNum, newNum)
},
)那么无论改变a还是b，回调函数的都不会执行，因为getter返回的是num2对象的地址啊😂，地址不变，当然监听不到变化
当然，我们也可以这样，显式地加上 deep 选项，强制转成深层侦听器：
watch(
() => count.num2,
(newNum, oldNum) => {
console.log(`Count changed from ${oldNum} to ${newNum}`)
console.log(oldNum, newNum)
},
{ deep: true },
)
在 vue 3.5+中，我们还可以设置深度监听的层数，如{ deep: 1}，来限制最大遍历深度——即 Vue 应该遍历对象嵌套属性的级数
const count = reactive({
num1: 0,
num2: {
a: 1,
b: 2,
},
})
watch(count, (newNum, oldNum) => {
console.log(oldNum, newNum)
}, {
deep: 1
})
count.num2.a++比如上面的例子中，当我们改变num2.a的值时，侦听回调函数就不会执行
4. 立即回调的侦听器
watch 默认是懒执行的：仅当数据源变化时，才会执行回调。也就是说在创建创建侦听器时，并不会执行。但但在某些场景中，我们又会有这种需求。
比如：我们想请求一些初始数据，然后在相关状态更改时重新请求数据。
watch(
source,
(newValue, oldValue) => {
// 立即执行，且当 `source` 改变时再次执行
},
{ immediate: true }
)5. 一次性侦听器
每当被侦听源发生变化时，侦听器的回调就会执行。但有时候会希望回调函数只在源变化时触发一次，那么就可以使用 once: true 选项。 注意：仅支持 vue 3.4 及以上版本
watch(
source,
(newValue, oldValue) => {
// 当 `source` 变化时，仅触发一次
},
{ once: true }
)6. watchEffect()
watchEffect 会自动收集所有在回调函数内使用的响应式数据，并在其中任何一个数据发生变化时重新运行回调函数。适合在不需要明确指定数据源的情况下自动收集依赖的数据。比如：
下面的代码，在每当 todoId 的引用发生变化时使用侦听器来加载一个远程资源：
const todoId = ref(1)
const data = ref(null)
watch(
todoId,
async () => {
const response = await fetch(
`https://jsonplaceholder.typicode.com/todos/${todoId.value}`
)
data.value = await response.json()
},
{ immediate: true }
)注意：侦听器在这里两次使用了 todoId 的，一次是作为源，另一次是在回调中。
像这种情况，我们可以用 watchEffect 函数 来自动跟踪回调的响应式依赖。
watchEffect(async () => {
const response = await fetch(
`https://jsonplaceholder.typicode.com/todos/${todoId.value}`
)
data.value = await response.json()
})回调会立即执行，且不需要指定 immediate: true。在执行期间，它还会自动追踪 todoId.value 作为依赖（和计算属性类似）。每当 todoId.value 变化时，回调会再次执行。
虽然对于这种依赖项只有一个得例子来说，watchEffect的作用不是很明显，但如果有许多依赖项，且数据源不明确时呢，炒鸡好用！！
所以：watch 和 watchEffect 的主要区别其实就是追踪响应式依赖的方式不同而已。
7. 暂停、恢复和停止侦听器
<template>
<el-card>
<p>num: {{ count.num1 }}</p>
<el-button @click="count.num1++">add</el-button>
<el-button @click="pause">暂停</el-button>
<el-button @click="resume">继续监听</el-button>
<el-button @click="stop">停止监听</el-button>
</el-card>
</template>
<script setup lang="ts">
import { reactive, watch } from 'vue'
const count = reactive({
num1: 1,
})
const { stop, resume, pause } = watch(
() => count.num1,
(newNum, oldNum) => {
console.log(oldNum, newNum)
},
)
</script>
注意：仅支持 vue 3.5 及以上版本
官方文档地址：响应式 API：核心 | Vue.js (vuejs.org)
8. 清理副作用
侦听器会在数据源变化时执行一些“副作用”。但这些“副作用”可能会产生一些需要后续清理的资源（如未完成的异步请求、事件监听器等），Vue提供了机制来清理这些资源，以避免内存泄漏或其他潜在问题。
1. watch
在Vue 3.5之前，watch的第三个参数是一个可选的副作用清理函数。这个函数会在侦听器被停用或组件卸载时调用，允许你进行资源清理。
watch(id, async (newId, oldId, onCleanup) => {
const { response, cancel } = doAsyncWork(newId)
// 当 `id` 变化时，`cancel` 将被调用，
// 取消之前的未完成的请求
onCleanup(cancel)
data.value = await response
})
在Vue 3.5+，
import { onWatcherCleanup } from 'vue'
watch(id, async (newId) => {
const { response, cancel } = doAsyncWork(newId)
onWatcherCleanup(cancel)
data.value = await response
})
2. watchEffect
在Vue 3.5之前， watchEffect 的第一个参数为副作用清理函数.
watchEffect(async (onCleanup) => {
const { response, cancel } = doAsyncWork(newId)
// 如果 `id` 变化，则调用 `cancel`，
// 如果之前的请求未完成，则取消该请求
onCleanup(cancel)
data.value = await response
})
在Vue 3.5+，
import { onWatcherCleanup } from 'vue'
watchEffect(async () => {
const { response, cancel } = doAsyncWork(newId)
// 如果 `id` 变化，则调用 `cancel`，
// 如果之前的请求未完成，则取消该请求
onWatcherCleanup(cancel)
data.value = await response
})
注意：onWatcherCleanup 仅在 Vue 3.5+ 中支持，并且必须在 watchEffect 效果函数或 watch 回调函数的同步执行期间调用：不能在异步函数的 await 语句之后调用它。
若有错误或描述不当的地方，烦请评论或私信指正，万分感谢 😃
如果我的文章对你有帮助，你的赞👍就是对我的最大支持^_^