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 语句之后调用它。

---

若有错误或描述不当的地方，烦请评论或私信指正，万分感谢 😃

如果我的文章对你有帮助，你的赞👍就是对我的最大支持^_^