---

前言

提示：这里可以添加本文要记录的大概内容：

Vue 的 watch 选项用于观察和响应 Vue 实例上的数据变化，可以知道最新数据是多少，以及以前数据是多少，也可以提高调试数据。当需要在数据变化时执行 异步操作 或 复杂逻辑 时，监听器非常有用。

---

提示：以下是本篇文章正文内容，下面案例可供参考

watch: {visible () { // 监听 visible 属性的变化if (this.visible ) { // 当 visible 变为 true 时this.loadData(); // 触发数据加载，（例如发起 API 请求、更新状态等）}}
}

监听器的作用：

1. 监听 visible 属性：当组件的 visible 属性发生变化时（比如通过 show() 方法设置为 true 打开抽屉时），触发回调函数。
2. 触发数据加载：当 visible 变为 true 时（抽屉可见），调用 loadData() 方法加载部门权限树的数据。

工作流程：

• 当用户点击打开抽屉时，visible 被设为 true。
• 监听器检测到 visible 的变化，执行 if (this.visible) 判断。
• 条件满足时调用 this.loadData()，向后端请求部门权限树数据并渲染到界面上。

这个监听器确保了每次打开抽屉时，都会重新加载最新的权限数据，而不是缓存旧数据。

基本用法

1. 简单监听

new Vue({data: {message: 'Hello'},watch: {// 监听 message 的变化message(newVal, oldVal) {console.log(`新值: ${newVal}, 旧值: ${oldVal}`);}}
})

2. 对象形式配置

watch: {message: {handler(newVal, oldVal) {// 处理逻辑},immediate: true,  // 立即触发一次deep: true        // 深度监听}
}

---

使用场景

1. 执行异步操作

watch: {searchQuery(newVal) {// 输入框搜索时，防抖请求接口clearTimeout(this.timer);this.timer = setTimeout(() => {this.fetchResults(newVal);}, 500);}
}

2. 监听路由变化

watch: {'$route'(to, from) {// 路由变化时重新加载数据this.loadData(to.params.id);}
}

3. 复杂对象/数组变化

watch: {userInfo: {handler(newVal) {console.log('用户信息发生深度变化');},deep: true}
}

---

关键配置项

配置项	类型	说明
handler	Function	监听到变化时的回调函数
immediate	Boolean	是否在初始化时立即触发一次回调（默认 false）
deep	Boolean	是否深度监听对象/数组内部变化（默认 false）

与计算属性的区别

	watch	computed
目的	监听数据变化执行操作	基于依赖值计算新值
缓存	无缓存	有缓存（依赖不变不重新计算）
异步支持	支持	不支持
适用场景	数据变化时需要执行副作用（如请求接口）	模板中需要动态计算显示值

---

最佳实践

1. 优先使用计算属性
   如果只是需要根据数据生成新值，优先使用 computed

2. 避免深度监听的滥用
   深度监听（deep: true）会遍历对象所有属性，对性能有影响

3. 及时取消监听
   对于手动添加的监听器（vm.$watch），在组件销毁时要手动取消：

   created() {this.unwatch = this.$watch('data', handler);},beforeDestroy() {this.unwatch();}

4. 对象监听优化
   如果只需要监听对象的某个属性，可以用字符串路径：

   watch: {'obj.prop'(newVal) {// 监听 obj.prop 的变化}}

---

动态添加监听器

通过 vm.$watch 动态添加：

mounted() {const unwatch = this.$watch('dynamicData',(newVal) => {console.log('动态添加的监听器');},{ deep: true });// 保存取消函数以便后续销毁this.unwatchDynamic = unwatch;
}

---

注意事项

• 数组变更检测
  Vue 无法检测通过索引直接修改数组项（如 arr[0] = newVal），需使用 Vue.set 或 splice

• 对象属性添加
  直接给对象添加新属性不会被检测到，需使用 Vue.set