Vue基础教程（134）组件和组合API之响应式API中的watch()方法：[特殊字符] Vue3的watch()方法：你的前端“监控摄像头”，让数据变动无所遁形！

最新推荐文章于 2025-11-25 11:55:40 发布

原创

最新推荐文章于 2025-11-25 11:55:40 发布 · 921 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

👀 第一章：为什么我们需要一个“监控摄像头”？

想象一下，你家里有个保险箱，里头装着全部家当（数据）。你肯定想知道有没有小偷（意外修改）动过它，对吧？在Vue开发中，数据变化就是这样的“关键动静”——比如用户勾选了某个选项、从后台接了个新消息，或者表格数据被排序了。

在Vue 2时代，我们用的是watch选项，像这样：

export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`计数从${oldVal}变成了${newVal}！`)
    }
  }
}

这挺好用，但有个问题：当组件复杂起来，各种监听逻辑散落在各个角落，像是屋里装了十几个独立摄像头，查个记录得满屋跑。

Vue 3的组合式API带来了watch()函数——它像个智能中央监控系统，让你把相关监控集中管理，逻辑更清晰！

🎯 第二章：watch()基础篇 - 安装你的第一个“摄像头”

2.1 最基本的监控

先来个最简单的例子，监控一个基本类型的数据：

<template>
  <div>
    <p>计数：{
  
  { count }}</p>
    <button @click="count++">+1</button>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'

const count = ref(0)

// 安装监控摄像头！
watch(count, (newValue, oldValue) => {
  console.log(`🎉 计数变化：${oldValue} → ${newValue}`)
  
  if (newValue > 5) {
    console.log('⚠️ 计数超过5了，慢点点！')
  }
})
</script>

这就像在count变量上装了个摄像头，每次变化都会触发回调函数。点击按钮，控制台就会实时报告变化情况。

2.2 立即监控 - 不放过初始状态

但上面的摄像头只在变化时工作，如果想一开始就知道初始值呢？

watch(count, (newValue, oldValue) => {
  console.log(`计数状态：${oldValue} → ${newValue}`)
}, {
  immediate: true // 立即执行一次
})

加上immediate: true选项，就像摄像头装好瞬间先拍张照片——立即执行一次回调，oldValue是undefined，newValue是初始值。

🔍 第三章：进阶监控技巧 - 做个专业“保安”

3.1 深度监控 - 看透对象内部

现实中的数据很少是简单数字，更多的是对象。比如监控用户信息：

<template>
  <div>
    <p>用户名：{
  
  { userInfo.name }}</p>
    <p>年龄：{
  
  { userInfo.age }}</p>
    <button @click="userInfo.age++">过生日</button>
    <button @click="userInfo.contact.phone = '138'+Date.now()">换手机号</button>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'

const userInfo = ref({
  name: '小明',
  age: 25,
  contact: {
    phone: '13800138000',
    email: 'xiaoming@email.com'
  }
})

// 浅层监控 - 只监控userInfo本身被重新赋值
watch(userInfo, (newVal) => {
  console.log('用户信息整体变化了', newVal)
})

// 深层监控 - 连对象内部变化都能抓住
watch(userInfo, (newVal) => {
  console.log('用户信息任何属性变化了', newVal)
}, {
  deep: true // 开启深度监控
})
</script>

重要提示：深度监控虽好，但性能开销较大，就像高清摄像头比普通摄像头更耗电。只在必要时使用！