侦听器与深层响应式
使用侦听器和深度侦听响应数据变化
侦听器与深层响应式 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 3 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 3 节课。
什么是侦听器
侦听器会在数据发生变化时运行一个函数。
- 与计算属性不同，它用于副作用
- 获取数据、记录日志、保存到存储中
- 当某个特定值发生变化时作出响应
侦听函数
侦听函数接收要侦听的数据源，以及一个接收新值和旧值的回调函数。
import { ref, watch } from "vue"
const query = ref("")
watch(query, (newVal, oldVal) => {
console.log("changed from", oldVal, "to", newVal)
})实用示例
侦听搜索输入，在它发生变化时触发 API 调用。
const search = ref("")
watch(search, async (newQuery) => {
const results = await fetchResults(newQuery)
items.value = results
})立即选项
默认情况下，侦听器只会在发生变化时触发。立即选项还会让它立刻运行一次。
watch(userId, (id) => {
loadUser(id)
}, { immediate: true })
// Runs immediately with the current value,
// then again on every change深度选项
默认情况下，侦听对象只会在引用发生变化时触发。深度选项还会侦听嵌套属性。
const profile = reactive({ name: "Ada", address: { city: "London" } })
watch(profile, (val) => {
console.log("profile changed")
}, { deep: true })
// Fires even when profile.address.city changes侦听嵌套对象
如果不使用深度侦听，更改被侦听的响应式对象中的嵌套属性时，可能不会按预期触发回调。深度侦听可以确保触发，但会带来更多开销。
- 只有确实需要追踪嵌套数据时才使用深度侦听
- 对大型对象进行深度侦听可能开销很大
侦听获取器
要侦听特定的嵌套值，请将获取器函数作为数据源传入。
watch(
() => profile.address.city,
(newCity) => {
console.log("city is now", newCity)
}
)侦听多个数据源
传入数据源数组，即可同时侦听多个值。
watch([width, height], ([newW, newH], [oldW, oldH]) => {
console.log("size:", newW, "x", newH)
})watchEffect
watchEffect会立即运行，并在它读取的任何响应式值发生变化时重新运行。无需显式列出数据源。
import { watchEffect } from "vue"
watchEffect(() => {
console.log("count is", count.value)
})
// Runs now, and again whenever count changeswatch 与 watchEffect
选择两者时：
- 侦听显式指定数据源，提供旧值和新值，默认延迟运行
- watchEffect自动追踪依赖，立即运行，不提供旧值
需要上一个值或精确控制时使用侦听；追求便利时使用 watchEffect。
选项式 API 中的侦听器
选项式 API 会在以数据名称为键的侦听区块中声明侦听器。
export default {
data() {
return { question: "" }
},
watch: {
question(newVal, oldVal) {
this.getAnswer(newVal)
}
}
}快速检查
测试您对侦听器的理解。
回顾：侦听器与深度响应性
您已经学会使用副作用响应变化：
- 侦听观察数据源，并提供新值和旧值
- 立即在开始时运行一次
- 深度追踪嵌套对象的变化
- watchEffect自动追踪依赖并立即运行
- 使用数组侦听多个数据源
下一步：使用 Vue Router 进行路由。
常见问题解答
「侦听器与深层响应式」课时是免费的吗？
是的 — 「侦听器与深层响应式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 3 节课。
「侦听器与深层响应式」这节课中我会学到什么？
使用侦听器和深度侦听响应数据变化 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vue Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 3 节。
「侦听器与深层响应式」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vue Academy 课中编写并运行代码吗？
能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。