vue3源码解析——watch和watchEffect区别

'# vue3源码解析——watch和watchEffect区别

一、背景与问题

在Vue3开发中，watch和watchEffect是两个核心的响应式编程工具。它们都基于Vue3的响应式系统（基于Proxy和Reflect），但应用场景和实现机制存在本质差异。

在开发过程中，开发者常遇到以下困惑：

何时使用watch，何时使用watchEffect？
为什么watchEffect会自动追踪依赖？
两者在性能上有何差异？
如何避免常见的副作用管理问题？

本文将通过源码分析和实战案例，深入解析这两个API的底层原理和使用场景。

二、基本原理

1. 响应式系统的底层机制

Vue3的响应式系统通过以下核心机制实现：

使用Proxy包装对象，拦截属性访问和修改
通过Dep类管理依赖关系
使用Effect追踪和触发更新

当访问响应式数据时，会触发依赖收集（Dep.addSub）；当数据变化时，会触发依赖更新（Dep.notify）。

2. watch与watchEffect的实现差异

特性	watch	watchEffect
依赖追踪	需要手动声明依赖项	自动追踪所有用到的响应式数据
副作用执行	在数据变化后执行	在组件挂载后立即执行，并在变化时重复执行
清理逻辑	需要手动处理	自动处理（通过return语句）
适用场景	需要精确控制依赖项的观察	需要立即执行副作用并自动追踪依赖
副作用执行次数	每次依赖项变化执行一次	每次依赖项变化执行一次

三、环境准备

npm install -g vue
npm install -g @vue/cli

四、核心实现

1. 基础用法示例

// watch示例
import { watch } from 'vue'

watch(() => count, (newVal, oldVal) => {
  console.log(`count changed from ${oldVal} to ${newVal}`)
})

// watchEffect示例
import { watchEffect } from 'vue'

watchEffect(() => {
  console.log(`current count: ${count}`)
})

2. 源码解析：watchEffect的实现原理

在vue/packages/runtime-core/src/observer/index.js中，watchEffect的核心实现如下：

function watchEffect(effect, options) {
  let cleanup = undefined
  const effectFn = () => {
    if (cleanup) {
      cleanup()
    }
    let res
    try {
      res = effect()
    } catch (e) {
      // 处理异常
    }
    cleanup = res && res.cleanup
  }
  
  // 创建并运行effect
  return effectFn
}

关键点：

effectFn函数会自动追踪所有用到的响应式数据
通过cleanup变量管理副作用清理逻辑
在每次依赖项变化时重新执行effect

3. 源码解析：watch的实现原理

在vue/packages/runtime-core/src/observer/index.js中，watch的实现如下：

function watch(source, callback, options) {
  const wrappedSource = typeof source === 'function' ? source : () => source
  const effect = () => {
    const newValue = wrappedSource()
    const oldValue = lastValue
    lastValue = newValue
    callback(newValue, oldValue)
  }
  
  // 创建并运行effect
  return effect
}

关键点：

需要手动声明依赖项（source）
通过lastValue保存上一次的值
通过回调函数处理变化

五、完整案例

1. 实时搜索应用案例

<template>
  <div>
    <input v-model="query" placeholder="搜索..." />
    <div>匹配结果: {{ results }}</div>
  </div>
</template>

<script>
import { ref, watchEffect } from 'vue'

export default {
  setup() {
    const query = ref('')
    const results = ref([])
    
    watchEffect(() => {
      // 模拟搜索逻辑
      results.value = query.value ? 
        ['Apple', 'Banana', 'Cherry'].filter(item => 
          item.includes(query.value)
        ) : []
    })
    
    return { query, results }
  }
}
</script>

2. 数据持久化案例

import { ref, watch } from 'vue'

export default {
  setup() {
    const count = ref(0)
    
    watch(() => count.value, (newVal) => {
      // 模拟持久化存储
      localStorage.setItem('count', newVal)
    })
    
    return { count }
  }
}

六、源码解析

1. 依赖追踪机制

在Dep类中，通过addSub和notify方法实现依赖追踪：

class Dep {
  constructor() {
    this.subs = []
  }
  
  addSub(sub) {
    this.subs.push(sub)
  }
  
  notify() {
    this.subs.forEach(sub => sub.update())
  }
}

2. Effect的运行机制

在effect函数中，通过track和trigger方法实现响应式更新：

function track(target, key) {
  const dep = target.__dep__
  if (dep) {
    dep.addSub(effect)
  }
}

function trigger(target, key) {
  const dep = target.__dep__
  if (dep) {
    dep.notify()
  }
}

七、进阶使用

1. 精确控制依赖项

watch(
  () => ({
    count: count.value,
    isEven: count.value % 2 === 0
  }),
  (newVal, oldVal) => {
    console.log('count changed:', newVal.count)
  }
)

2. 使用深度观察

watch(
  () => user.value,
  (newVal, oldVal) => {
    console.log('user changed:', newVal)
  },
  { deep: true }
)

3. 使用立即执行

watchEffect(() => {
  console.log('Initial run')
  console.log('Current count:', count.value)
})

八、性能与工程实践

1. 性能优化技巧

避免不必要的观察：仅对变化的属性进行观察
使用深度观察时要谨慎：可能导致性能损耗
使用节流/防抖：对频繁变化的数据进行处理
清理副作用：通过return语句返回清理函数

2. 安全风险防范

避免内存泄漏：确保清理函数正确释放资源
处理异步操作异常：使用try/catch捕获异常
防止数据污染：避免直接修改响应式数据

九、常见问题与踩坑

1. 常见错误示例

// 错误：未处理清理逻辑
watchEffect(() => {
  const timer = setInterval(() => {
    console.log('tick')
  }, 1000)
})

问题：定时器未被清理，导致内存泄漏

解决方案：

watchEffect(() => {
  const timer = setInterval(() => {
    console.log('tick')
  }, 1000)
  return () => clearInterval(timer)
})

2. 常见问题分析

问题类型	描述	解决方案
依赖未被追踪	未正确声明依赖项	使用`watch`时确保依赖项正确声明
副作用未执行	依赖项未发生变更	确保依赖项确实发生变化
内存泄漏	未清理副作用	使用return语句返回清理函数
性能问题	频繁触发更新	使用`deep: false`或节流/防抖

十、最佳实践

1. 使用场景推荐

场景	推荐使用	原因
需要立即执行副作用	watchEffect	组件挂载时立即执行
需要精确控制依赖项	watch	精确指定观察的属性
需要持久化存储	watch	在数据变化后执行持久化操作
需要处理异步操作	watch	更容易管理异步逻辑

2. 代码规范建议

使用watchEffect处理组件初始化逻辑
使用watch处理需要精确控制的观察
对于复杂依赖，使用computed辅助
避免在watchEffect中使用ref或reactive直接赋值

十一、总结

watch和watchEffect是Vue3响应式编程的两大核心工具，它们在实现原理和使用场景上有本质差异。理解它们的底层机制，可以帮助开发者更有效地管理应用状态，避免常见的副作用管理问题。

在实际开发中，应根据具体需求选择合适的工具：

使用watchEffect处理需要立即执行且自动追踪依赖的副作用
使用watch处理需要精确控制依赖项的观察
对于复杂场景，结合computed和watch实现更精细的控制

通过合理使用这两个API，可以显著提升应用的响应性和可维护性，同时避免常见的性能陷阱和内存泄漏问题。