当前位置：首页 > news >正文

Vue3中的watch详解：掌握响应式侦听的艺术

news 2025/6/27 12:36:30

一、watch的核心作用

二、基础用法（对比Vue2优化）

三、高级配置选项

四、watch vs watchEffect

五、进阶技巧

六、最佳实践

七、场景示例

结语

一、watch的核心作用

监听响应式数据的变化，在数据变化时执行回调函数，适用于：

执行异步操作（如API请求）
复杂逻辑处理
数据变化时需要联动多个操作的场景

二、基础用法（对比Vue2优化）

import { ref, watch } from 'vue'// 1. 侦听ref数据
const count = ref(0)
watch(count, (newVal, oldVal) => {console.log(`计数变化：${oldVal} → ${newVal}`)
})// 2. 侦听多个数据源（Vue3新特性）
const name = ref('Alice')
const age = ref(25)watch([name, age], ([newName, newAge], [oldName, oldAge]) => {console.log(`姓名变化：${oldName}→${newName}`)console.log(`年龄变化：${oldAge}→${newAge}`)
})

三、高级配置选项

const user = reactive({ info: { name: 'Bob', contacts: { email: 'bob@test.com' }}
})// 深度监听 + 立即执行
watch(() => user.info,  // 使用getter返回对象(newInfo) => {console.log('邮箱变更:', newInfo.contacts.email)},{deep: true,     // 深度监听嵌套对象immediate: true // 组件创建时立即执行}
)

四、watch vs watchEffect

特性	watch	watchEffect
监听方式	显式指定数据源	自动收集依赖
立即执行	需配置immediate	默认立即执行
旧值获取	可获取oldVal	不可获取
适用场景	精确控制监听目标	简单副作用操作

// watchEffect示例
const searchQuery = ref('')
watchEffect(() => {// 自动追踪searchQuery.valuefetch(`/api/search?q=${searchQuery.value}`)
})

五、进阶技巧

停止监听器

const stop = watch(data, callback)
// 需要时停止监听
stop()

清除副作用

watch(idRef, (id, _, onCleanup) => {const timer = setTimeout(() => {}, 1000)onCleanup(() => clearTimeout(timer)) // 清除上次的定时器
})

调试钩子

watch(source,callback,{onTrack(e) { debugger }, // 依赖被收集时触发onTrigger(e) { debugger } // 依赖变更时触发}
)

六、最佳实践

优先使用ref+watch组合处理基础类型
深度监听对象时，考虑使用toRefs解构避免性能损耗
异步操作务必使用清理函数避免内存泄漏
对于简单逻辑，优先考虑computed > watchEffect > watch

性能提示：监听大型数组时，添加{ deep: false }可禁用深度遍历

七、场景示例

// 路由参数监听
import { watch } from 'vue'
import { useRoute } from 'vue-router'const route = useRoute()
watch(() => route.params.id, (newId) => {fetchUser(newId)
})// 表单验证联动
watch([() => form.username, () => form.email],([username, email]) => {isFormValid.value = username.length > 0 && email.includes('@')}
)