编辑“︁Vue.js侦听器”︁

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

== 基本概念 ==  
侦听器通过`watch`选项定义，监听数据属性的变化，并在变化时触发回调函数。其核心特点是：  
* **响应式监测**：自动检测依赖的响应式数据。  
* **异步支持**：适合处理需要延迟执行的操作（如API请求）。  
* **深度监听**：可递归监听对象或数组的内部变化。  

=== 语法结构 ===  
侦听器的基本定义方式如下：  
<syntaxhighlight lang="javascript">  
export default {  
  data() {  
    return {  
      message: 'Hello Vue!'  
    }  
  },  
  watch: {  
    message(newValue, oldValue) {  
      console.log(`消息从 ${oldValue} 变为 ${newValue}`);  
    }  
  }  
}  
</syntaxhighlight>  

== 侦听器的类型 ==  
=== 简单侦听器 ===  
监听基本数据类型（如字符串、数字）的变化：  
<syntaxhighlight lang="javascript">  
watch: {  
  counter(newVal) {  
    if (newVal > 10) alert('计数器超过10!');  
  }  
}  
</syntaxhighlight>  

=== 深度侦听器 ===  
监听对象或数组的内部变化，需设置`deep: true`：  
<syntaxhighlight lang="javascript">  
watch: {  
  user: {  
    handler(newVal) {  
      console.log('用户信息变化:', newVal);  
    },  
    deep: true // 深度监听  
  }  
}  
</syntaxhighlight>  

=== 立即触发侦听器 ===  
初始化时立即执行回调，设置`immediate: true`：  
<syntaxhighlight lang="javascript">  
watch: {  
  query: {  
    handler(newVal) {  
      this.fetchData(newVal); // 初始化时自动调用  
    },  
    immediate: true  
  }  
}  
</syntaxhighlight>  

== 实际应用案例 ==  
=== 表单验证 ===  
监听输入框内容，实时验证格式：  
<syntaxhighlight lang="javascript">  
watch: {  
  email(newVal) {  
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;  
    this.isValid = regex.test(newVal);  
  }  
}  
</syntaxhighlight>  

=== API请求防抖 ===  
结合`lodash.debounce`避免频繁请求：  
<syntaxhighlight lang="javascript">  
import debounce from 'lodash.debounce';  

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

== 与计算属性的对比 ==  
{| class="wikitable"  
|+ '''侦听器 vs 计算属性'''  
! 特性 !! 侦听器 !! 计算属性  
|-  
| 用途 | 响应数据变化执行副作用 | 派生新数据  
|-  
| 缓存 | 无 | 自动缓存  
|-  
| 异步 | 支持 | 不支持  
|}  

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

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

{{Vue.js}}

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js基础]]