vue 的 watch: 如何使用

Vue.js 的 `watch` 是一种监听视图属性变化并执行特定操作的功能。它可以在组件实例上创建自定义的观察者，当监视的目标（通常是数据）发生变化时，执行指定的回调函数。以下是 `watch` 的基本用法：

1. **简单监听**:

   data() {
     return {
       message: "Hello",
     }
   },
   watch: {
     message(newVal, oldVal) {
       console.log(`Message updated from "${oldVal}" to "${newVal}"`);
     }
   },
   // 当message属性改变时，会在控制台打印出新旧值
   this.message = "World"; // 输出: Message updated from "Hello" to "World"

2. **深度监听**:
如果你想监听嵌套对象或数组的变化，可以设置第二个参数为 `true` 进行深度监听：

   watch: {
     nestedObject: {
       handler(newValue, oldValue) {
         console.log('nestedObject changed');
       },
       deep: true,
     },
   }

3. **立即执行回调**:
`immediate` 参数可用于在首次创建时就执行一次回调：

   watch: {
     someProp({ value }, { immediate }) {
       if (immediate && value !== 'initial') {
         console.log('Initial value detected!');
       }
     },
     initial: 'initial',
     immediate: true,
   }

4. **函数形式的处理器**:
也可以传入一个函数作为处理器，该函数将接收两个参数：当前的新值和旧值：

   watch: {
     age(age) {
       console.log('Age is now:', age);
     }
   },
   methods: {
     updateAge(newAge) {
       this.age = newAge;
     }
   },
   mounted() {
     this.updateAge(25); // 触发watcher
   }

5. **取消监听**:
如果不再需要监听，可以使用 `unwatch` 方法取消：

   const watcher = this.$watch('someProperty', callback);
   // ... later
   this.unwatch(watcher); // 移除监听