Vue.js 是一个功能丰富的前端框架，它允许开发者以声明式的方式创建动态和反应式的用户界面。Vue 3 引入的 Composition API 增强了代码的组织和复用，其中 watch 函数是一个非常有用的特性。本文将通过一系列的示例，展示如何在 Vue 3 应用程序中使用 watch 函数来监控数据变化。
监控响应式引用（ref）
响应式引用是 Vue 3 中最基本的响应式特性之一。下面的例子演示了如何监控一个响应式引用的变化：
import {
ref, watch } from 'vue';
export default {
setup() {
const count = ref(0);
watch(count, (newCount, oldCount) => {
console.log(`Count changed from ${
oldCount} to ${
newCount}`);
if (newCount === 10) {
alert('Count reached 10!');
}
});
return {
count };
}
};
在这个例子中，每当 count 的值变化时，watch 回调就会执行，并打印出新旧值。
监控响应式对象（reactive）
reactive 提供了一个更复杂的响应式状态管理。下面的例子展示了如何监控一个响应式对象的属性变化：
import {
reactive, watch } from 'vue';
export default {
setup() {
const state = reactive({
firstName: 'John',
lastName: 'Doe'
});
watch(() => state.firstName, (newFirstName, oldFirstName) => {
console.log(`First name changed from ${
oldFirstName} to ${
newFirstName}`);
});
watch(() => state.lastName, (newLastName, oldLastName) => {
console.log(`Last name changed from ${
oldLastName} to ${
newLastName}`);
});
return {
state };
}
};
这个例子中，我们分别监控了 firstName 和 lastName 属性的变化，并在它们变化时执行回调。
监控计算属性（computed）
计算属性是基于它们的响应式依赖进行缓存的。下面的例子展示了如何监控一个计算属性的变化：
import {
ref, computed, watch } from 'vue';
export default {
setup() {
const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed(() => `${
firstName.value} ${
lastName.value}`);
watch(fullName, (newFullName, oldFullName) => {
console.log(`Full name changed from ${
oldFullName} to ${
newFullName}`);
});
return {
firstName, lastName, fullName };
}
};
在这个例子中，fullName 是一个计算属性，它的值是基于 firstName 和 lastName 的。当这些依赖变化时，fullName 也会更新，触发 watch 回调。
监控多个数据源
Vue 3 的 watch 也可以同时监控多个数据源。下面的例子展示了如何同时监控多个响应式引用：
import {
ref, watch } from 'vue';
export default {
setup() {
const width = ref(window.innerWidth);
const height = ref(window.innerHeight);
watch([width, height], ([newWidth, newHeight], [oldWidth, oldHeight]) => {
console.log(`Window size changed from ${
oldWidth}x${
oldHeight} to ${
newWidth}x${
newHeight}`);
});
return {
width, height };
}
};
这个例子中，我们监控了窗口的 width 和 height，并在它们变化时打印出新旧尺寸。
使用 watch 的 immediate 和 deep 选项
watch 函数还接受一个配置对象，其中 immediate 和 deep 选项允许你更精细地控制监控行为：
import {
ref, watch } from 'vue';
export default {
setup() {
const userProfile = ref({
name: 'Alice',
preferences: {
theme: 'light'
}
});
// 使用 `deep` 选项来深度监控对象内部的变化
watch(userProfile, (newProfile, oldProfile) => {
console.log('User profile changed!');
}, {
deep: true });
// 使用 `immediate` 选项立即触发回调
watch(userProfile, (newProfile, oldProfile) => {
console.log('This runs immediately and whenever userProfile changes!');
}, {
immediate: true });
return {
userProfile };
}
};
在这个例子中，deep 选项允许我们监控 userProfile 对象内部的变化，而 immediate 选项确保了在监控设置之后立即触发一次回调。
结论
Vue 3 的 watch 函数提供了一个强大的接口来响应数据的变化。通过上面的例子，我们看到了如何在不同场景下使用 watch 来监控响应式引用、响应式对象、计算属性以及多个数据源。记住，要谨慎使用 watch，避免不必要的性能开销，并合理利用 immediate 和 deep 选项来满足特定的需求。
希望这篇文章能够帮助你更好地理解和利用 Vue 3 中的 watch 函数，为你的应用带来更多的动态和响应式特性。祝你在 Vue 3 的世界里编程愉快！
