一、watch 核心作用

• 监测数据变化：当被监听的数据发生改变时，自动执行指定的处理函数
• 处理副作用：适合执行异步操作（如接口请求）、复杂逻辑处理等 “副作用” 代码

二、基础语法（3 种写法）

1. 简单写法（函数形式）
   适用于简单逻辑，直接监听数据变化：

   watch: {// 监听data中的countcount(newVal, oldVal) {console.log(`count从${oldVal}变成了${newVal}`);}
   }
   

2. 完整配置写法（对象形式）
   适用于需要深度监听、立即执行等场景：

   watch: {user: {// 处理函数handler(newVal, oldVal) {console.log('用户信息变了');},deep: true,      // 深度监听（对象内部属性变化）immediate: true  // 初始化时立即执行一次}
   }
   

3. 动态监听（$watch 方法）
   适用于在方法或生命周期中动态添加监听：

   mounted() {// 返回一个取消监听的函数const unwatch = this.$watch('message', (newVal) => {console.log('message变了：', newVal);});// 需要时取消监听// unwatch();
   }
   

三、监听不同类型数据的注意事项

1. 基本类型（String/Number/Boolean）
   直接监听即可，新旧值都能正确获取：

   watch: {username(newVal, oldVal) {// 正确获取新旧值}
   }
   

2. 对象（Object）

   • 默认只监听对象引用变化，不监听内部属性变化
   • 需开启 deep: true 才能监听内部属性变化
   • 优化：直接监听对象的某个属性（性能更好）

   watch: {// 直接监听对象的属性（推荐）'user.age'(newVal) {console.log('年龄变了：', newVal);}
   }
   

3. 数组（Array）

   • 监听数组时，push/pop/splice 等方法会触发监听
   • 坑点：直接通过索引修改元素（如 this.arr[0] = 10）不会触发监听
   • 解决：用 splice 或重新赋值数组（this.arr = [...this.arr]）

四、与 computed 的核心区别

记忆口诀：
“computed 算结果，watch 做动作”
“复杂计算用 computed，异步操作找 watch”