@TOC
1. Vue2 中的 watch
1. 基本用法
在 Vue2 中，watch 是一个对象，其键是要观察的表达式，值是对应的回调函数或包含选项的对象。
// 对象写法
export default {
data() {
return {
count: 0,
user: {
name: 'John',
age: 25
}
}
},
watch: {
// 监听基本数据类型
count(newVal, oldVal) {
console.log(`count changed from ${
oldVal} to ${
newVal}`)
},
// 深度监听对象
user: {
handler(newVal, oldVal) {
console.log('user changed:', newVal)
},
deep: true, // 深度监听
immediate: true // 立即执行
},
// 监听对象特定属性
'user.name': function(newVal, oldVal) {
console.log(`name changed from ${
oldVal} to ${
newVal}`)
}
}
}
2. 程序式监听
Vue2 也提供了 $watch API，可以在实例的任何地方监听数据变化。
export default {
mounted() {
// 使用 $watch API
const unwatch = this.$watch(
'count',
(newVal, oldVal) => {
console.log(`count changed: ${
oldVal} -> ${
newVal}`)
},
{
immediate: true,
deep: false
}
)
// 取消监听
// unwatch()
}
}
2. Vue3 中的 watch
1. 组合式 API 用法
Vue3 的 watch 更加灵活，支持监听 ref、reactive 对象、getter 函数等多种数据源。
import {
ref, reactive, watch, watchEffect } from 'vue'
export default {
setup() {
const count = ref(0)
const user = reactive({
name: 'John',
age: 25
})
// 监听 ref
watch(count, (newVal, oldVal) => {
console.log(`count changed from ${
oldVal} to ${
newVal}`)
})
// 监听 reactive 对象
watch(
() => user.name, // getter 函数
(newVal, oldVal) => {
console.log(`name changed from ${
oldVal} to ${
newVal}`)
}
)
// 深度监听对象
watch(
() => user,
(newVal, oldVal) => {
console.log('user changed:', newVal)
},
{
deep: true }
)
// 监听多个源
watch(
[() => count.value, () => user.name],
([newCount, newName], [oldCount, oldName]) => {
console.log(`count: ${
oldCount}->${
newCount}, name: ${
oldName}->${
newName}`)
}
)
// watchEffect - 自动追踪依赖
watchEffect(() => {
console.log(`count is ${
count.value}, name is ${
user.name}`)
})
return {
count,
user
}
}
}
2. 选项式 API 用法
Vue3 也支持在选项式 API 中使用 watch，与 Vue2 的用法类似。
import {
watch } from 'vue'
export default {
data() {
return {
count: 0,
user: {
name: 'John',
age: 25
}
}
},
watch: {
count(newVal, oldVal) {
console.log(`count changed from ${
oldVal} to ${
newVal}`)
}
},
created() {
// 使用 watch 函数
watch(
() => this.user.name,
(newVal, oldVal) => {
console.log(`name changed from ${
oldVal} to ${
newVal}`)
}
)
}
}
3.核心原理分析
1. Vue2 的 Watch 原理
Vue2 的 watch 基于响应式系统的依赖收集和派发更新机制。
- 在组件实例初始化阶段，遍历 watch 对象的每一个属性，为每一个监听表达式创建一个 watcher 实例。
- watcher 的创建过程：解析表达式，生成 getter 函数；执行 getter 函数，触发依赖收集；保存旧值，等待数据变化。
- 当被监听的数据发生变化时，触发 setter，通知对应的 watcher 更新；watcher 执行 getter 获取新值，比较新值和旧值，如果不同则执行回调函数。
2. Vue3 的 Watch 原理
Vue3 的 watch 基于 effect 机制实现。
- 将回调函数包装成一个 effect，当被监听的数据发生变化时，effect 会重新执行。
- 通过 track 函数进行依赖收集，trigger 函数触发更新。
- 使用调度器 scheduler 控制 effect 的执行时机，实现异步更新和 flush 选项。
4. 主要差异对比
1. 差异总结
- Vue2 的 watch 语法较为简单直观，适合选项式 API；Vue3 的 watch 更加灵活，适合组合式 API。
- Vue3 的 watch 基于 effect 机制实现，提供了更好的性能和更丰富的配置选项。
- 两者都支持深度监听、立即执行、异步回调等特性，但在语法和使用方式上有所不同。
2. 特性对比
| 特性 | Vue2 | Vue3 |
|---|---|---|
| API 形式 | 选项式 | 组合式 + 选项式 |
| 监听 reactive | 不支持 | 原生支持 |
| 深度监听 | 需要显式配置 | reactive 对象默认深度监听 |
| 多源监听 | 不支持 | 支持监听多个数据源 |
| 清理副作用 | 不支持 | 支持 cleanup 函数 |
| 性能 | 相对较低 | 基于 Proxy，性能更好 |
5. 使用建议
1. 性能优化
避免不必要的深度监听，只监听需要的属性。
// Vue3 - 避免不必要的深度监听
const largeObject = reactive({
/* 大量数据 */ })
// 不好的做法
watch(largeObject, () => {
// 任何属性变化都会触发
})
// 好的做法 - 只监听需要的属性
watch(
() => largeObject.importantProp,
() => {
// 只有 importantProp 变化时触发
}
)
2. 清理副作用
Vue3 支持在 watch 中清理副作用，避免内存泄漏。
// Vue3 - 清理副作用
watch(
data,
async (newVal, oldVal, onCleanup) => {
let cancelled = false
onCleanup(() => {
cancelled = true
})
const result = await fetchData(newVal)
if (!cancelled) {
// 处理结果
}
}
)
3. 防抖处理
使用防抖函数避免频繁触发 watch 回调。
import {
debounce } from 'lodash-es'
// Vue3 防抖监听
watch(
searchQuery,
debounce((newVal) => {
searchAPI(newVal)
}, 300)
)
6.常见问题解答
1. Vue2 和 Vue3 的 watch 混用？
在 Vue3 的选项式 API 中，可以继续使用 Vue2 风格的 watch 选项，但不建议混用。
2. 什么时候用 watch，什么时候用 computed？
watch 用于执行副作用（如 API 调用、DOM 操作），computed 用于派生数据。
3. watchEffect 和 watch 的区别？
watchEffect 自动追踪依赖，立即执行；watch 需要明确指定监听源，默认懒执行。
通过深入理解 Vue2 和 Vue3 中 watch 的用法和原理，可以更好地根据项目需求选择合适的监听方式，并编写出更高效、可维护的代码。
