【Vue3】watch监听使用【超详细】

在Vue 3中，watch用于观察响应式数据源，并在数据源变化时执行特定的函数。你可以监控响应式数据、计算属性或者路由参数等。

1. 监控响应式数据：

import { watch, ref } from 'vue';
 
const myData = ref('');
 
watch(myData, (newValue, oldValue) => {
  console.log(`数据从 ${oldValue} 变化到 ${newValue}`);
});
 
// 你可以通过 myData.value 来改变数据，触发 watch 的回调函数。

2. 深度监控：当你需要监控一个对象内部属性的变化时，可以使用deep选项。

import { watch, reactive } from 'vue';
 
const myObject = reactive({
  nestedData: ''
});
 
watch(myObject, (newValue, oldValue) => {
  console.log('myObject 变化了', newValue);
}, {
  deep: true
});
 
// 改变嵌套的属性也会触发 watch。
myObject.nestedData = '新数据';

3. 立即触发：使用immediate选项可以在监听开始时立即触发回调函数。

import { watch, ref } from 'vue';
 
const myData = ref('');
 
watch(myData, (newValue, oldValue) => {
  console.log(`数据从 ${oldValue} 变化到 ${newValue}`);
}, {
  immediate: true
});
 
// 在这段代码中，即使 myData 没有变化，回调函数也会在 watch 开始时执行一次。

4. 停止监听：可以使用返回的停止函数停止监听。

import { watch, ref, onUnmounted } from 'vue';
 
const myData = ref('');
 
const stopWatching = watch(myData, (newValue, oldValue) => {
  console.log(`数据从 ${oldValue} 变化到 ${newValue}`);
});
 
// 当组件卸载时，停止监听。
onUnmounted(stopWatching);

5. 监听计算属性：

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++;

6. 数组的响应式变化也会触发 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);

7. 监听路由参数：

import { watch, useRoute } from 'vue-router';
 
const route = useRoute();
 
watch(() => route.params, (newParams, oldParams) => {
  console.log('路由参数变化了', newParams);
});
 
// 当路由参数发生变化时，会触发 watch。

以上代码展示了如何在Vue 3中使用watch来监控不同类型的数据源，并在数据变化时执行相应的函数。