Vue2 和 Vue3 中 watch 用法和原理详解 - 实践

目录

• 1. Vue2 中的 watch
• • 1. 基本用法
  • 2. 程序式监听
• 2. Vue3 中的 watch
• • 1. 组合式 API 用法
  • 2. 选项式 API 用法
• 3.核心原理分析
• • 1. Vue2 的 Watch 原理
  • 2. Vue3 的 Watch 原理
• 4. 主要差异对比
• • 1. 差异总结
  • 2. 特性对比
• 5. 使用建议
• • 1. 性能优化
  • 2. 清理副作用
  • 3. 防抖处理
• 6.常见问题解答
• • 1. Vue2 和 Vue3 的 watch 混用？
  • 2. 什么时候用 watch，什么时候用 computed？
  • 3. watchEffect 和 watch 的区别？

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 的用法和原理，可以更好地根据项目需求选择合适的监听方式，并编写出更高效、可维护的代码。