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 性能优化三要素 优化维度 Vue2 Vue3 依赖收集 初始化阶段静态分析 运行时动态追踪 执行效率 全量依赖比对 按需更新机制 内存占用 每个组件独立维护依赖 共享响应系统 三、版本差异全景对比 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