在 Vue 3 中，watch API 得到了增强和重新设计，以提供更加灵活和强大的响应式数据监听能力。Vue 3 引入了 Composition API，其中 watch 函数是 Composition API 的一部分，允许你在 setup() 函数中直接监听响应式引用（ref）或响应式对象（reactive）的变化。
基本用法
在 Vue 3 的 Composition API 中，watch 函数的基本用法如下：
javascript复制代码
import { ref, watch, onMounted } from 'vue'; | |
export default { | |
setup() { | |
const count = ref(0); | |
// 监听 count 的变化 | |
watch(count, (newValue, oldValue) => { | |
console.log(`count 从 ${oldValue} 变成了 ${newValue}`); | |
}); | |
// 可以在 onMounted 中启动异步操作，并在完成后更新 count | |
onMounted(() => { | |
setTimeout(() => { | |
count.value++; | |
}, 1000); | |
}); | |
return { | |
count, | |
}; | |
}, | |
}; |
监听多个源
watch 也可以同时监听多个响应式引用或响应式对象，当它们中的任何一个发生变化时，都会执行回调函数。
javascript复制代码
import { ref, watch } from 'vue'; | |
export default { | |
setup() { | |
const firstName = ref('John'); | |
const lastName = ref('Doe'); | |
watch([firstName, lastName], ([newFirstName, newLastName], [oldFirstName, oldLastName]) => { | |
console.log(`名字从 ${oldFirstName} ${oldLastName} 变成了 ${newFirstName} ${newLastName}`); | |
}); | |
return { | |
firstName, | |
lastName, | |
}; | |
}, | |
}; |
深度监听
默认情况下，watch 只会监听响应式引用的值的变化，而不会深入监听对象内部属性的变化。如果你需要深度监听一个响应式对象，可以传递第三个参数 { deep: true }。
javascript复制代码
import { reactive, watch } from 'vue'; | |
export default { | |
setup() { | |
const user = reactive({ | |
name: 'John Doe', | |
age: 30, | |
}); | |
watch(user, (newValue, oldValue) => { | |
// 注意：这里不会触发，因为 user 对象引用没有变 | |
// 除非使用深度监听 | |
}, { deep: true }); | |
// 深度监听 user 对象内部属性的变化 | |
watch(() => user.name, (newName, oldName) => { | |
console.log(`名字从 ${oldName} 变成了 ${newName}`); | |
}); | |
return { | |
user, | |
}; | |
}, | |
}; |
立即执行
如果你希望在监听开始时立即执行回调函数，可以传递 { immediate: true } 作为 watch 的第四个参数。
javascript复制代码
watch(count, (newValue, oldValue) => { | |
// ... | |
}, { immediate: true }); |
停止监听
watch 函数返回一个停止监听的函数。你可以调用这个函数来停止监听响应式数据的变化。
javascript复制代码
const stopWatch = watch(count, (newValue, oldValue) => { | |
// ... | |
}); | |
// 停止监听 | |
stopWatch(); |
这些是使用 Vue 3 中 watch 函数的基本和高级用法。通过灵活使用这些功能，你可以有效地管理组件中的响应式数据变化。
