Vue基础教程（66）监听对象：深度分析Vue基础教程之监听对象：像狗仔队一样盯紧你的数据！

原创 于 2025-09-29 07:53:28 发布 · 414 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

一、为什么我们需要“监听”这个功能？

想象一下，你是个班主任，班里有个特别调皮的学生小明。你不需要时时刻刻盯着全班50个人，只需要在小明搞事情的时候出手干预——这就是Vue监听器的核心思想。

在Vue的世界里，数据是活的，它们在变，视图也要跟着变。但有时候，自动更新还不够用。比如：

  • 用户修改了表单，你要实时保存草稿
  • 筛选条件变化时，要重新请求数据
  • 某个数据达到阈值时，要弹出提示

这时候，Vue的监听器（watch）就派上用场了。它就像给你的数据请了个私人保镖，数据一动，它立刻向你报告。

二、Vue监听器的两种写法：正式工和临时工

Vue提供了两种监听方式，各有各的适用场景。

1. 选项式API - 像正式员工

这是在组件内部最常用的写法，直接在watch选项里定义：

export default {
  data() {
    return {
      user: {
        name: '张三',
        age: 25,
        girlfriend: {
          name: '小美',
          age: 24
        }
      }
    }
  },
  watch: {
    // 监听user.name的变化
    'user.name'(newVal, oldVal) {
      console.log(`名字从${oldVal}变成了${newVal}`)
    }
  }
}

这种写法像是招聘正式员工，稳定可靠，适合长期监听。

2. 命令式API - 像临时工

有时候你需要临时监听一下，用完就撤：

export default {
  mounted() {
    // 临时监听user.age
    this.unwatch = this.$watch('user.age', (newVal, oldVal) => {
      console.log(`年龄从${oldVal}变成了${newVal}`)
    })
  },
  beforeUnmount() {
    // 用完记得解雇，不然会内存泄漏
    this.unwatch()
  }
}

$watch返回一个取消监听的函数，就像是临时工，活干完就得让人家走。

三、深度监听：扒开对象的内裤

普通监听只能看到对象第一层的变化，但如果你的对象内部还有对象（套娃对象），就需要深度监听了。

普通监听的局限性
watch: {
  user(newVal, oldVal) {
    console.log('user变了') 
    // 只有user被整个替换时才会触发
    // user.name或user.girlfriend.name变化时不会触发
  }
}

这就好比你看房子，只看到外墙刷了新漆，不知道里面装修成啥样了。

开启深度监听模式
watch: {
  user: {
    handler(newVal, oldVal) {
      console.log('user的任意属性变了，包括女朋友！')
    },
    deep: true,  // 开启深度监听
    immediate: true // 立即执行一次
  }
}

deep: true就像给你的监听器装了X光透视眼，对象里三层外三层的变化都看得清清楚楚。

但是！深度监听有个坑：
newVal和oldVal会指向同一个对象！因为Vue为了性能，不会对旧值进行深拷贝。

watch: {
  user: {
    handler(newVal, oldVal) {
      console.log(newVal === oldVal) // true！它们是同一个对象
    },
    deep: true
  }
}

四、实战演练：打造一个会“吃醋”的用户资料编辑器

现在我们来个完整示例，模拟一个用户资料编辑页面，当用户修改女朋友信息时，给出各种“贴心”提示。

完整代码示例
<template>
  <div class="user-editor">
    <h2>用户资料编辑器 💕</h2>
    
    <div class="form-group">
      <label>你的名字：</label>
      <input v-model="user.name" placeholder="请输入姓名">
    </div>
    
    <div class="form-group">
      <label>你的年龄：</label>
      <input type="number" v-model.number="user.age" placeholder="请输入年龄">
      <span v-if="ageWarning" class="warning">👀 {{ ageWarning }}</span>
    </div>
    
    <div class="girlfriend-info">
      <h3>女朋友信息 👩❤️👨</h3>
      
      <div class="form-group">
        <label>女朋友名字：</label>
        <input v-model="user.girlfriend.name" placeholder="女朋友叫什么">
        <span v-if="nameChanged" class="tip">💡 记住新名字哦！</span>
      </div>
      
      <div class="form-group">
        <label>女朋友年龄：</label>
        <input type="number" v-model.number="user.girlfriend.age" placeholder="女朋友多大">
        <span v-if="ageDiff" class="warning">⚠️ {{ ageDiff }}</span>
      </div>
    </div>
    
    <div class="action-log">
      <h4>操作日志 📝</h4>
      <ul>
        <li v-for="(log, index) in logs" :key="index">{{ log }}</li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'UserEditor',
  data() {
    return {
      user: {
        name: '张三',
        age: 25,
        girlfriend: {
          name: '小美',
          age: 24
        }
      },
      logs: [],
      nameChanged: false,
      ageWarning: '',
      ageDiff: ''
    }
  },
  watch: {
    // 监听用户名变化
    'user.name'(newVal, oldVal) {
      this.addLog(`用户名从"${oldVal}"改为"${newVal}"`)
    },
    
    // 监听用户年龄，带验证
    'user.age': {
      handler(newVal) {
        if (newVal < 18) {
          this.ageWarning = '未成年早恋？'
        } else if (newVal > 40) {
          this.ageWarning = '大叔，注意身体啊'
        } else {
          this.ageWarning = ''
        }
        this.addLog(`年龄更新为: ${newVal}`)
      },
      immediate: true
    },
    
    // 深度监听女朋友信息变化
    user: {
      handler(newVal, oldVal) {
        // 注意：这里oldVal和newVal是同一个引用
        this.addLog('女朋友信息可能有变化，正在检查...')
      },
      deep: true
    },
    
    // 专门监听女朋友名字
    'user.girlfriend.name'(newVal, oldVal) {
      this.nameChanged = true
      this.addLog(`⚠️ 女朋友名字从"${oldVal}"改为"${newVal}"`)
      
      // 2秒后重置提示
      setTimeout(() => {
        this.nameChanged = false
      }, 2000)
    },
    
    // 监听年龄差
    'user.girlfriend.age'(newVal) {
      const diff = this.user.age - newVal
      
      if (Math.abs(diff) > 5) {
        this.ageDiff = `你们相差${Math.abs(diff)}岁，${diff > 0 ? '姐弟恋' : '兄妹恋'}？`
      } else {
        this.ageDiff = ''
      }
      
      this.addLog(`女朋友年龄更新为: ${newVal}`)
    }
  },
  methods: {
    addLog(message) {
      const timestamp = new Date().toLocaleTimeString()
      this.logs.unshift(`[${timestamp}] ${message}`)
      
      // 只保留最近10条日志
      if (this.logs.length > 10) {
        this.logs.pop()
      }
    }
  },
  mounted() {
    this.addLog('用户资料编辑器已启动，开始监听...')
  }
}
</script>
<style scoped>
.user-editor {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Microsoft YaHei', sans-serif;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: inline-block;
  width: 120px;
  font-weight: bold;
}

input {
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.girlfriend-info {
  margin-top: 30px;
  padding: 15px;
  background: #fff9f9;
  border-radius: 8px;
  border: 1px solid #ffebee;
}

.warning {
  color: #ff4757;
  margin-left: 10px;
  font-size: 12px;
}

.tip {
  color: #2ed573;
  margin-left: 10px;
  font-size: 12px;
}

.action-log {
  margin-top: 30px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.action-log ul {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
}

.action-log li {
  padding: 5px 0;
  border-bottom: 1px solid #eee;
  font-size: 12px;
  color: #666;
}
</style>
示例功能解析

这个示例展示了监听器的多种用法：

  1. 基础监听：用户名变化时记录日志
  2. 条件监听：年龄变化时给出不同提示
  3. 深度监听：女朋友任何信息变化都知晓
  4. 特定属性监听：专门盯着女朋友名字变化
  5. 计算差值监听：实时计算年龄差

运行这个示例，你会发现：

  • 修改用户名时，日志会记录变化
  • 年龄输入18以下或40以上会有警告
  • 修改女朋友信息时会有各种“贴心”提示
  • 所有操作都被实时记录在日志中

五、性能优化：别让监听器成为性能杀手

深度监听虽然强大，但不能滥用，否则会严重影响性能。

优化技巧
  1. 尽量监听具体属性：
// 不好的做法
watch: {
  user: {
    handler() { /* ... */ },
    deep: true // 监听整个对象
  }
}

// 好的做法  
watch: {
  'user.name'() { /* ... */ },
  'user.age'() { /* ... */ }
}
  1. 适时取消监听：
export default {
  data() {
    return {
      unwatchers: []
    }
  },
  mounted() {
    // 动态添加监听器
    this.unwatchers.push(
      this.$watch('some.data', this.handler)
    )
  },
  beforeUnmount() {
    // 组件销毁时取消所有监听
    this.unwatchers.forEach(fn => fn())
  }
}
  1. 使用计算属性代替监听器：
    很多时候，计算属性是更好的选择：
// 用监听器实现（啰嗦）
data() {
  return {
    firstName: '张',
    lastName: '三', 
    fullName: '张三'
  }
},
watch: {
  firstName(val) {
    this.fullName = val + this.lastName
  },
  lastName(val) {
    this.fullName = this.firstName + val
  }
}

// 用计算属性实现（优雅）
computed: {
  fullName() {
    return this.firstName + this.lastName
  }
}

六、总结：监听器的正确打开方式

Vue的监听器就像你的数据侦探，用好它能让你的应用更智能。记住几个关键点：

  1. 简单变化用watch选项，稳定可靠
  2. 动态监听用$watch，灵活但记得清理
  3. 深层对象用deep，但要注意性能
  4. 能用computed就别用watch，代码更简洁
  5. 监听器不是万能的，合理使用才是王道

现在，去给你的数据请个“私人侦探”吧！记住，好的监听器应该像优秀的特工——该出手时就出手，平时深藏不露。

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

值引力

持续创作，多谢支持！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值