Vue.js侦听器

Vue.js侦听器（Watchers）是Vue.js中用于观察和响应数据变化的机制，允许开发者在特定数据属性变化时执行自定义逻辑。与计算属性不同，侦听器更适合处理异步操作或开销较大的响应行为。

基本概念

侦听器通过`watch`选项定义，监听数据属性的变化，并在变化时触发回调函数。其核心特点是：

• **响应式监测**：自动检测依赖的响应式数据。
• **异步支持**：适合处理需要延迟执行的操作（如API请求）。
• **深度监听**：可递归监听对象或数组的内部变化。

语法结构

侦听器的基本定义方式如下：

  
export default {  
  data() {  
    return {  
      message: 'Hello Vue!'  
    }  
  },  
  watch: {  
    message(newValue, oldValue) {  
      console.log(`消息从 ${oldValue} 变为 ${newValue}`);  
    }  
  }  
}

侦听器的类型

简单侦听器

监听基本数据类型（如字符串、数字）的变化：

  
watch: {  
  counter(newVal) {  
    if (newVal > 10) alert('计数器超过10!');  
  }  
}

深度侦听器

监听对象或数组的内部变化，需设置`deep: true`：

  
watch: {  
  user: {  
    handler(newVal) {  
      console.log('用户信息变化:', newVal);  
    },  
    deep: true // 深度监听  
  }  
}

立即触发侦听器

初始化时立即执行回调，设置`immediate: true`：

  
watch: {  
  query: {  
    handler(newVal) {  
      this.fetchData(newVal); // 初始化时自动调用  
    },  
    immediate: true  
  }  
}

实际应用案例

表单验证

监听输入框内容，实时验证格式：

  
watch: {  
  email(newVal) {  
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;  
    this.isValid = regex.test(newVal);  
  }  
}

API请求防抖

结合`lodash.debounce`避免频繁请求：

  
import debounce from 'lodash.debounce';  

watch: {  
  searchQuery: debounce(function(newVal) {  
    this.fetchResults(newVal);  
  }, 500) // 延迟500毫秒  
}

与计算属性的对比

侦听器 vs 计算属性

特性	侦听器	计算属性
响应数据变化执行副作用 | 派生新数据
无 | 自动缓存
支持 | 不支持

性能优化建议

• 避免过度使用深度监听（`deep: true`），可能引发性能问题。
• 对复杂数据结构，考虑使用计算属性或手动拆分监听。

总结

侦听器是Vue.js中强大的数据响应工具，尤其适合处理异步任务和复杂逻辑。通过合理使用`handler`、`deep`和`immediate`选项，可以覆盖大多数业务场景。