学习vue第九天 计算属性与侦听器

📚 派对邀请函：计算属性 & 侦听器

时间：30 分钟

地点：Vue3 的响应式乐园

着装：轻松休闲，带上笑容和键盘 🕺💃

---

🎯 开场脱口秀：为什么需要他们俩？

1️⃣ 模板里直接写表达式？------"让 HTML 做数学作业，太残忍！"

<h3>{{ firstName + ' ' + lastName }}</h3>

👎 缺点：

• 模板=作文本，你却让它算口算？排版乱、难维护
• 重复计算，性能像龟速 Wi-Fi

2️⃣ methods 救场？------"每次客人来都重新装修客厅"

<h3>{{ getFullName() }}</h3>

👎 缺点：

• 组件每渲染一次 = 函数再跑一次，缓存？不存在的！
• 输入框抖一下，函数跑十圈，CPU 加班加到秃头

3️⃣ computed 闪亮登场------"Excel 公式附体，只算一次，终身缓存！"

<h3>{{ fullName }}</h3>

✅ 优点：

• 依赖不变，Vue 连眼皮都懒得抬，直接给缓存
• 模板清爽像刚敷完面膜
• 响应式：数据变，结果秒更新，像电梯门自动开合

---

🧮 计算属性（computed）------"佛系计算器"

核心心法：

1. 能算就行，绝不副作用（别在里面改 data，会被 Vue 拉小黑屋）
2. 有缓存，像省钱小能手，只买一次单
3. 必须 return，不然模板拿到空气

举个栗子🌰：

computed: {
  fullName() {
    console.count('★ computed 执行次数')
    return this.firstName + ' ' + this.lastName
  },
  discountPrice() {
    return this.price > 100 ? this.price * 0.8 : this.price
  }
}

• 模板里 {``{ fullName }} 像读变量，其实背后是"懒加载公式"
• 打开控制台，依赖不变的话，计数器只涨一次------缓存实锤！

适用场景小抄：

• 字符串拼接（姓名、地址、标题）
• 数字格式化（折扣、总价、税额）
• 列表过滤/排序（搜索关键字高亮）
• 只要"显示结果"，先想到 computed

---

👀 侦听器（watch）------"监控摄像头 + 自动跑腿"

核心心法：

1. 数据一变，立刻报警，还能拿到新旧"案底"
2. 擅长副作用：发请求、存本地、跳转、弹广告（咳咳）
3. 支持异步，写 async/await 也 OK，记得 try-catch 别甩锅

举个栗子🌰：

watch: {
  keyword(newVal, oldVal) {
    console.log(`🔍 搜索词从"${oldVal}"->"${newVal}"`)
    this.searchProducts(newVal) // 异步搜商品
  },
  age(newAge) {
    if (newAge >= 18) this.canVote = true
  }
}

• 用户每敲一次键盘，摄像头就记录一次，然后派跑腿去后台拉数据
• 异步搜索、保存草稿、表单验证------全是它的主场

常见误区警示牌：

• ❌ 用 watch 算总价（又贵又慢）
• ✅ 用 watch 保存总价到 localStorage（副作用专业户）

---

⚖️ 选择指南------"点菜不纠结"

需求	点菜
只是算个值给模板看	点 computed 套餐
数据变化要干活（请求、存储、跳转）	点 watch 大份
既要新值又要副作用	先 computed 算值，再 watch 这个值

---

🏃‍♂️ 30 分钟速成路径（防迷路地图）

1. 10 min → 敲 demo 03：把 firstName + lastName 弄成 fullName，感受缓存
2. 10 min → 敲 demo 06：输入关键字，watch 帮你异步搜索
3. 10 min → 敲 demo 10：购物车总价 computed + 本地缓存 watch，双剑合璧

小贴士：console.log / console.count 是调试神器，多打几行，让控制台替你说话！

---

💡 记忆顺口溜

computed 懒懒算，缓存像省钱；

watch 勤快跑，变化就出门；

一个负责"出新值"，一个负责"干苦力"；

别让他们干反活，代码清爽不脱发！

---

🎁 彩蛋：调试彩蛋包

// 看 computed 缓存
computed: { fullName() { console.count('computed 运行'); return ... } }

// 看 watch 变化轨迹
watch: { xxx(n, o) { console.log(`旧->新：${o} → ${n}`) } }

打开控制台，计数器只涨一次 = 缓存生效；箭头顺序对 = 监听正确 。

让日志飞一会儿，你会对它们的爱更深一层 ❤️

---

结语

两兄弟已经介绍完毕：

• computed ------ 佛系计算器，能缓存、会返回值，模板好伴侣
• watch ------ 监控摄像头，数据变动就跑腿，异步副作用全靠它

带上顺口溜和地图，去敲代码吧！

记住：别让他们干反活，你的代码会更优雅，头发也更安全！