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 的世界里编程愉快！
)
