@[TOC](目录)
# 1. Vue2 中的 watch
 
## 1. 基本用法
在 Vue2 中，watch 是一个对象，其键是要观察的表达式，值是对应的回调函数或包含选项的对象。
 
```javascript
// 对象写法
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，可以在实例的任何地方监听数据变化。
 
```javascript
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 函数等多种数据源。
 
```javascript
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 的用法类似。
 
```javascript
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. 性能优化
避免不必要的深度监听，只监听需要的属性。
 
```javascript
// Vue3 - 避免不必要的深度监听
const largeObject = reactive({ /* 大量数据 */ })
 
// 不好的做法
watch(largeObject, () => {
  // 任何属性变化都会触发
})
 
// 好的做法 - 只监听需要的属性
watch(
  () => largeObject.importantProp,
  () => {
    // 只有 importantProp 变化时触发
  }
)
```
 
## 2. 清理副作用
Vue3 支持在 watch 中清理副作用，避免内存泄漏。
 
```javascript
// Vue3 - 清理副作用
watch(
  data,
  async (newVal, oldVal, onCleanup) => {
    let cancelled = false
    onCleanup(() => {
      cancelled = true
    })
    
    const result = await fetchData(newVal)
    if (!cancelled) {
      // 处理结果
    }
  }
)
```
 
## 3. 防抖处理
使用防抖函数避免频繁触发 watch 回调。
 
```javascript
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 的用法和原理，可以更好地根据项目需求选择合适的监听方式，并编写出更高效、可维护的代码。

在 Vue2 中，watch 是一个对象，其键是要观察的表达式，值是对应的回调函数或包含选项的对象。

Vue2 和 Vue3 中 watch 用法和原理详解

前端

Vue2与Vue3的watch机制对比：Vue2采用选项式API，通过Watcher实例实现数据监听；Vue3基于effect机制，支持组合式API，提供更灵活的监听方式。两者都支持深度监听和异步回调，但Vue3新增多源监听、副作用清理等特性，性能更优。文章详细解析了watch的基本用法、核心原理及最佳实践，帮助开发者高效实现数据响应。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

Vue2与Vue3的watch机制对比：Vue2采用选项式API，通过Watcher实例实现数据监听；Vue3基于effect机制，支持组合式API，提供更灵活的监听方式。两者都支持深度监听和异步回调，但Vue3新增多源监听、副作用清理等特性，性能更优。文章详细解析了watch的基本用法、核心原理及最佳实践，帮助开发者...

Vue2 和 Vue3 中 watch 用法和原理详解-腾讯云开发者社区-腾讯云

Vue2 和 Vue3 中 watch 用法和原理详解

Vue2 和 Vue3 中 watch 用法和原理详解

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐