Vue2 监听器 watcher

文章目录

前言
监听器的作用：
工作流程：
基本用法
- [1. 简单监听](#1. 简单监听)
- [2. 对象形式配置](#2. 对象形式配置)
使用场景
- [1. 执行异步操作](#1. 执行异步操作)
- [2. 监听路由变化](#2. 监听路由变化)
- [3. 复杂对象/数组变化](#3. 复杂对象/数组变化)
关键配置项
与计算属性的区别
动态添加监听器
注意事项

前言

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

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

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

javascript 复制代码

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

监听器的作用：

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

工作流程：

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

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

基本用法

1. 简单监听

javascript 复制代码

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

2. 对象形式配置

javascript 复制代码

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

使用场景

1. 执行异步操作

javascript 复制代码

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

2. 监听路由变化

javascript 复制代码

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

3. 复杂对象/数组变化

javascript 复制代码

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

关键配置项

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

与计算属性的区别

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

最佳实践

优先使用计算属性

如果只是需要根据数据生成新值，优先使用 computed
避免深度监听的滥用

深度监听（deep: true）会遍历对象所有属性，对性能有影响
及时取消监听

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

javascript 复制代码

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

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

javascript 复制代码

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

动态添加监听器

通过 vm.$watch 动态添加：

javascript 复制代码

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

注意事项

数组变更检测

Vue 无法检测通过索引直接修改数组项（如 arr[0] = newVal），需使用 Vue.set 或 splice
对象属性添加

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