Day 3: 计数器实践
🚀 实践计数器应用
日期: 2025年12月3日 学习目标: 实现简单的计数器应用，巩固Day1和Day2学到的知识 估计时间: 1小时 ⏱️ 认知层次: 实践巩固 + 知识应用
📋 Day 3 学习菜单 (精简版)
🔄 快速回顾 (10分钟)
- markdown
📁 复习文件: [daydayup-20251202.md](./daydayup-20251202.md) ⚡ 快速回顾 (10分钟): - Vue自动解包机制：只对顶层ref自动解包 - 嵌套ref需要手动加.value - Template中自动解包，Script中必须手动.value - ref()创建响应式数据，可以是任意类型 💡 今天要用这些知识来实践！
💻 实践任务 - 简单计数器 (45分钟)
- markdown
📁 文件位置: day3/counter.html ✅ 功能需求 (够用就行): - 显示当前数字 - 一个"加1"按钮 - 一个"减1"按钮 🎯 核心代码结构: ```html <div id="app"> <h1>计数器</h1> <div>{{ count }}</div> <button @click="increment">+1</button> <button @click="decrement">-1</button> </div> <script> const { createApp, ref } = Vue; createApp({ setup() { const count = ref(0); const increment = () => { count.value++; // 注意：script中必须用.value }; const decrement = () => { count.value--; // 注意：script中必须用.value }; return { count, // Template中会自动解包 increment, decrement }; } }).mount('#app'); </script>💡 提示:
- 参考Day1的代码结构
- 记住：Template中会自动解包
- Script中count.value++必须写.value
- 函数必须return才能在模板中使用
📝 简单记录 (5分钟)
- markdown
📝 简单记录 (50-100字即可)： 💭 **今天做了什么**: - 🎯 **一个小收获**: - 💡 **明天想学**: -
📊 Day 3 完成检查表
✅ 核心任务 (完成这3个就够了)
🎁 额外奖励 (想做就做，不做也没关系)
📋 今日学习产出
| 产出类型 | 完成情况 | 文件位置 |
|---|---|---|
| 计数器应用 | ✅完成 | ./day3/counter.html |
| 实践总结 | ⏳进行中 | 本文件记录 |
🎉 Day 3 庆祝与展望
🏆 今日成就
🎯 明日预告 (Day 4)
markdown
预计内容:
- 继续深入学习Vue
- 目标: 保持学习节奏，不累不倦💡 轻松一刻
今天学完了，给自己点个赞！ 👍
- 不需要完美，完成就好
- 不需要理解所有，有收获就行
- 保持轻松，享受学习过程
📈 学习追踪仪表板
| Day | 理论学习 | 实践编码 | AI协作 | 反思质量 | 总体满意度 |
|---|---|---|---|---|---|
| 1 | 🔥🔥🔥 | 🔥🔥🔥 | 🔥🔥🔥 | 🔥🔥🔥 | 🔥🔥🔥 |
| 2 | 🔥🔥🔥 | ⏭️跳过 | 🔥🔥🔥 | 🔥🔥🔥 | 🔥🔥🔥 |
| 3 | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ |
🔥 = 优秀 🔥🔥 = 良好 🔥🔥🔥 = 卓越 ⏳ = 进行中 ⏭️ = 跳过
💬 当天学习记录
简单记录一下今天的学习：
📝 快速笔记
今天做了什么：
- 查阅了 Vue 3.4+ 版本关于 ref 嵌套解包的改进
- 发现了 Vue 3.4.31+ 的重要更新
- 创建了 day3 目录并实现了计数器应用
- 完成了实践任务并测试通过
遇到的小问题：
- 昨天记录的"嵌套ref需要手动加.value"规则在 Vue 3.4.31+ 有变化
解决方式：
- 查阅了 Vue 官方 CHANGELOG
- 了解了 toDisplayString 函数的改进
- 通过实践验证了 ref 的使用方法
核心收获：
- Vue 3.4.31+ 在显示时会自动解包嵌套的 ref
- 但属性访问/方法调用时仍需手动 .value
- 通过计数器应用巩固了 ref、setup、模板语法等核心概念🔍 重要发现：Vue 3.4.31+ 的 ref 解包改进
📢 背景
昨天（Day 2）我们学习了 Vue 的 ref 嵌套和解包机制，记录的核心规则是：
- 只对顶层 ref 自动解包
- 嵌套的 ref 需要手动加
.value
但今天查阅资料发现，Vue 3.4.31+ 版本对此有重要改进！
🎯 Vue 3.4.31+ 的重要更新
在 Vue 3.4.31 版本中，有一个重要的修复：unwrap refs in toDisplayString (#7306)
核心变化：
编译器层面：仍然不会自动为嵌套 ref 添加
.value- 编译结果仍然是
user.value.name（不会变成user.value.name.value）
- 编译结果仍然是
运行时层面：
toDisplayString函数会在显示时自动解包嵌套的 ref- 这意味着在模板中显示嵌套 ref 时，可以省略
.value
- 这意味着在模板中显示嵌套 ref 时，可以省略
📊 实际效果对比
示例代码：
javascript
const user = ref({
name: ref('Alice'),
age: ref(20)
});Vue 3.4.30 及之前版本：
html
<!-- ❌ 显示 ref 对象，不是值 -->
<div>{{ user.name }}</div>
<!-- 显示：[object Object] 或 RefImpl {...} -->Vue 3.4.31+ 版本：
html
<!-- ✅ 运行时自动解包，显示值 -->
<div>{{ user.name }}</div>
<!-- 显示：Alice（运行时自动解包） -->⚠️ 重要限制
虽然显示时可以自动解包，但属性访问和方法调用仍然需要手动加 .value：
javascript
const user = ref({
name: ref('Alice'),
profile: ref({
bio: ref('Developer')
})
});html
<!-- ✅ Vue 3.4.31+：显示时自动解包 -->
<div>{{ user.name }}</div> <!-- ✅ 显示：Alice -->
<div>{{ user.profile }}</div> <!-- ✅ 显示：[object Object]（profile是对象ref） -->
<div>{{ user.profile.bio }}</div> <!-- ✅ 显示：Developer（运行时解包） -->
<!-- ❌ 但如果需要访问属性或方法，仍需手动.value -->
<div>{{ user.name.toUpperCase() }}</div> <!-- ❌ 错误：name是ref，需要.value -->
<div>{{ user.name.value.toUpperCase() }}</div> <!-- ✅ 正确 -->📋 规则总结（Vue 3.4.31+）
| 场景 | Vue 3.4.30 及之前 | Vue 3.4.31+ |
|---|---|---|
| 顶层 ref 显示 | ✅ 自动解包 | ✅ 自动解包 |
| 嵌套 ref 显示 | ❌ 需要手动 .value | ✅ 运行时自动解包 |
| 嵌套 ref 属性访问 | ❌ 需要手动 .value | ❌ 仍需要手动 .value |
| 嵌套 ref 方法调用 | ❌ 需要手动 .value | ❌ 仍需要手动 .value |
💡 关键理解
- 编译器行为：Vue 编译器仍然只检查顶层 ref，不会深度遍历嵌套的 ref
- 运行时行为：
toDisplayString函数在显示时会递归解包嵌套的 ref - 性能考虑：编译器层面的限制是为了性能优化，运行时解包仅用于显示场景
🔗 参考资源
🎓 学习心得
这个发现让我意识到：
- 文档和版本很重要：不同版本的 Vue 行为可能有差异
- 理解原理很重要：编译器层面和运行时层面的行为是不同的
- 实践验证很重要：理论规则需要在实际项目中验证
建议：在实际项目中，如果使用 Vue 3.4.31+，可以尝试在显示嵌套 ref 时省略 .value，但属性访问时仍需手动添加。
🚀 记住: 学习不需要完美，完成比完美更重要！今天是第3天，轻松实践，巩固知识！
今日宣言: "1小时搞定，实践巩固，明天继续！" 🎓✨
🎯 特别提醒:
- ⏱️ 时间控制在1小时内
- 😊 保持轻松心态
- ✅ 完成核心任务就好
- 🎁 额外任务想做就做，不做也没关系
