Vue2 中 watch 如何用？和 Vue3 监听器有什么区别和优化？

在Vue生态中，watch监听器是处理数据副作用的核心工具。Vue2通过选项式API实现数据监听，而Vue3通过组合式API带来更灵活的watch/watchEffect方案。版本升级不仅改变了API形态，更在性能优化、代码组织和功能扩展等方面实现突破。本文将详解Vue2的watch使用方法，对比分析Vue3监听机制的核心改进。

一、Vue2中watch的完整指南

1.1 基础监听配置

在Vue2的选项式API中，watch作为组件选项使用：
```javascript
export default {
data() {
return {
searchText: ''
}
},
watch: {
searchText(newVal, oldVal) {
this.handleSearch(newVal)
}
}
}
```
核心特征：
声明在组件watch选项中
自动接收新旧值参数
支持字符串形式监听嵌套属性

1.2 高级配置选项

通过对象语法可启用深度监听：
```javascript
watch: {
userInfo: {
handler(newVal) {
console.log('用户信息变更:', newVal)
},
deep: true, // 深度监听对象变化
immediate: true // 立即执行回调
}
}
```
配置说明：
deep: 监听对象内部嵌套变化（默认false）
immediate: 组件创建时立即触发回调
flush: 控制回调执行时机（Vue2.1+支持）

二、Vue3监听机制的革新

2.1 watch函数式调用

Vue3在组合式API中引入独立watch函数：
```javascript
import { ref, watch } from 'vue'

const count = ref(0)
const stop = watch(count, (newVal) => {
console.log(`计数器更新: ${newVal}`)
})

// 手动停止监听
stop()
```
重大改进：
函数式调用更灵活
返回停止监听函数
支持多数据源监听

2.2 watchEffect智能追踪

```javascript
const searchQuery = ref('')
watchEffect(() => {
fetchResults(searchQuery.value)
})
```
核心优势：
自动收集响应依赖
立即执行副作用
无需显式声明监听源

2.3 性能优化三要素

三、版本差异全景对比

3.1 API形态对比

Vue2选项式：
```javascript
export default {
watch: {
field(newVal) {
// 处理逻辑
}
}
}
```

Vue3组合式：
```javascript
setup() {
const state = reactive({ count: 0 })

watch(
() => state.count,
(val) => {
console.log('count变更:', val)
}
)
}
```

3.2 核心差异总结

• API组织：选项式 vs 函数式组合
• 依赖收集：声明时确定 vs 运行时动态追踪
• 性能表现：Vue3默认关闭深度监听，内存占用降低40%
• 调试能力：Vue3提供onTrack/onTrigger调试钩子

四、实战开发最佳实践

4.1 表格页面开发示例（基于Vue-Pure-Admin）

场景需求：
实现带搜索过滤的数据表格，支持安全搜索和结果缓存

```javascript
// 组合式API实现
import { watch, ref } from 'vue'

export function useTableSearch() {
const searchQuery = ref('')
const cachedResults = ref([])

// 安全搜索过滤
const filterResults = (results) => {
return results.filter(item =>
item.name.includes(searchQuery.value) &&
item.isSafe === true
)
}

watch(searchQuery, async (newVal) => {
if(newVal.length > 2) {
const res = await fetchResults(newVal)
cachedResults.value = filterResults(res)
}
}, { debounce: 300 }) // 防抖优化
}
```

优化技巧：
使用防抖配置减少请求频率
结合computed属性实现高效过滤
通过watchEffect自动清理副作用

五、升级迁移指南

5.1 代码改造策略

1. 将选项式watch改写为函数式调用
2. 深度监听需显式配置{ deep: true }
3. 使用watchEffect重构自动依赖的逻辑
4. 利用onScopeDispose管理监听生命周期

结语：面向未来的监听方案

Vue3的响应式系统重构带来显著的性能提升，watch/watchEffect的组合使用能应对90%以上的开发场景。在复杂业务中，建议：
1. 优先使用watchEffect处理自动依赖
2. 需要精确控制时选择watch
3. 结合computed属性优化计算逻辑

掌握新版监听机制，不仅能提升代码执行效率，更能充分发挥组合式API的模块化优势，为复杂应用的开发打下坚实基础。