Vue基础教程（65）监听方法：Vue的监听器：从菜鸟到福尔摩斯，我只用了这几个技巧！

大家好呀！今天咱们来聊聊Vue中那个超级实用但又经常被新手忽略的功能——监听器watch。别看它名字普通，用好了简直就是安插在数据里的“贴身侦探”，数据稍有风吹草动，它立马向你汇报！

还记得我刚学Vue那会儿，总觉得data里的数据变化了，页面自然会更新，要watch干啥？直到遇到那个“著名”的坑...

一、为什么需要监听器？一个真实踩坑故事

上个月，我帮朋友写个会员管理系统，有个需求是：当用户选择不同会员等级时，实时显示对应的优惠价格。我信心满满地用了计算属性，结果...翻车了！

// 错误示范 - 当年的我
data() {
  return {
    memberLevel: '普通会员',
    discount: 0.9,
    originalPrice: 100
  }
},
computed: {
  finalPrice() {
    return this.originalPrice * this.discount
  }
}

问题来了：当会员等级从"普通会员"变成"黄金会员"时，discount确实变成了0.8，但finalPrice并没有立即更新！为啥？因为originalPrice没变，计算属性依赖没变啊！

这时候，watch闪亮登场了：

// 正确姿势 - 现在的我
watch: {
  memberLevel(newVal, oldVal) {
    console.log(`会员等级从${oldVal}变成了${newVal}`)
    if (newVal === '黄金会员') {
      this.discount = 0.8
    } else if (newVal === '铂金会员') {
      this.discount = 0.7
    } else {
      this.discount = 0.9
    }
  }
}

Bingo！问题解决了！这就是watch的威力——它不关心依赖，只关心目标数据的变化。

二、watch基础：从"Hello Watch"开始

2.1 最简单的watch

来，先看个最基础的例子，咱们监听一个基本数据类型：

<template>
  <div>
    <p>当前计数：{
  
  { count }}</p>
    <button @click="count++">+1</button>
    <p>{
  
  { message }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0,
      message: ''
    }
  },
  watch: {
    count(newCount, oldCount) {
      this.message = `计数从${oldCount}变成了${newCount}`
      console.log(`侦探报告：count发生变化，旧值：${oldCount}，新值：${newCount}`)
    }
  }
}
</script>

点击按钮，你会发现控制台实时打印变化信息。这就是watch的基本用法——像个尽职的哨兵，时刻盯着count的值。

2.2 监听对象？坑来了！

但当我们监听对象时，事情就变得有趣了：

data() {