在Vue 3中，watch用于观察响应式数据源，并在数据源变化时执行特定的函数。你可以监控响应式数据、计算属性或者路由参数等。
- 监控响应式数据：
import { watch, ref } from 'vue';
const myData = ref('');
watch(myData, (newValue, oldValue) => {
console.log(`数据从 ${oldValue} 变化到 ${newValue}`);
});
// 你可以通过 myData.value 来改变数据，触发 watch 的回调函数。- 深度监控：当你需要监控一个对象内部属性的变化时，可以使用
deep选项。
import { watch, reactive } from 'vue';
const myObject = reactive({
nestedData: ''
});
watch(myObject, (newValue, oldValue) => {
console.log('myObject 变化了', newValue);
}, {
deep: true
});
// 改变嵌套的属性也会触发 watch。
myObject.nestedData = '新数据';- 立即触发：使用
immediate选项可以在监听开始时立即触发回调函数。
import { watch, ref } from 'vue';
const myData = ref('');
watch(myData, (newValue, oldValue) => {
console.log(`数据从 ${oldValue} 变化到 ${newValue}`);
}, {
immediate: true
});
// 在这段代码中，即使 myData 没有变化，回调函数也会在 watch 开始时执行一次。- 停止监听：可以使用返回的停止函数停止监听。
import { watch, ref, onUnmounted } from 'vue';
const myData = ref('');
const stopWatching = watch(myData, (newValue, oldValue) => {
console.log(`数据从 ${oldValue} 变化到 ${newValue}`);
});
// 当组件卸载时，停止监听。
onUnmounted(stopWatching);- 监听计算属性：
import { watch, computed, ref } from 'vue';
const myData = ref(0);
const computedData = computed(() => myData.value * 2);
watch(computedData, (newValue, oldValue) => {
console.log(`计算属性从 ${oldValue} 变化到 ${newValue}`);
});
// 改变 myData 的值，触发 watch 回调函数。
myData.value++;- 数组的响应式变化也会触发 watch：
import { watch, reactive } from 'vue';
const myArray = reactive([1, 2, 3]);
watch(myArray, (newValue, oldValue) => {
console.log('数组变化了', newValue);
});
// 对数组的操作，如 push、splice 等，都会触发 watch。
myArray.push(4);- 监听路由参数：
import { watch, useRoute } from 'vue-router';
const route = useRoute();
watch(() => route.params, (newParams, oldParams) => {
console.log('路由参数变化了', newParams);
});
// 当路由参数发生变化时，会触发 watch。以上代码展示了如何在Vue 3中使用watch来监控不同类型的数据源，并在数据变化时执行相应的函数。