Vue2 监听器 watcher

---

前言

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

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