vue watch的实现原理
Vue 中 watch 的实现原理
Vue 的 watch 功能基于响应式系统的依赖收集和触发机制。当监听的数据变化时，会执行用户定义的回调函数。
依赖收集阶段
在组件初始化时，Vue 会遍历 watch 选项，为每个被监听的数据创建一个 Watcher 实例。这个 Watcher 会在首次执行时触发被监听数据的 getter，从而将自身添加到该数据的依赖列表中。
// 简化版 Watcher 构造过程
new Watcher(vm, expOrFn, callback, { deep: true })深度监听的实现
当设置 deep: true 时，Vue 会递归遍历被监听对象的所有属性，触发每个子属性的 getter 来收集依赖：
if (this.deep) {
traverse(value) // 递归访问所有嵌套属性
}触发更新阶段
当被监听的数据发生变化时，会触发 setter 通知所有依赖的 Watcher。Watcher 会执行回调函数，并传入新值和旧值：
// 简化版更新逻辑
update() {
const newValue = this.get()
const oldValue = this.value
this.cb.call(this.vm, newValue, oldValue)
}立即执行的实现
当设置 immediate: true 时，Vue 会在创建 Watcher 后立即执行一次回调函数：
if (this.immediate) {
this.cb.call(this.vm, this.value, null)
}与计算属性的区别
watch 和计算属性都基于相同的响应式系统，但主要区别在于：
- 计算属性用于派生状态，具有缓存特性
watch更适合执行副作用操作，如异步请求或复杂逻辑
性能优化建议
对于大型对象或数组，使用 deep 监听会带来性能开销。可以通过监听特定路径或使用计算属性优化：
watch: {
'obj.key': function(newVal) {
// 只监听特定属性
}
}Vue 3 的 watch API 在 Composition API 中进一步优化，提供了更灵活的监听方式，但核心原理保持不变。
