Day 46: <KeepAlive> - 组件缓存与优化 (~3 小时)
- 本日目标: 理解
<KeepAlive>的作用，学会如何使用它来缓存组件实例，从而优化应用性能和用户体验。 - 所需资源: Vue 3 官方文档 (
<KeepAlive>): https://cn.vuejs.org/guide/built-ins/keep-alive.html
学习计划:
-
番茄时钟 1 (25 分钟工作 + 5 分钟休息):
- 内容:
<KeepAlive>简介及其目的。 - 活动: 阅读官方文档中关于
<KeepAlive>的介绍。理解为什么组件缓存是有益的，尤其是在频繁切换组件（如标签页界面）的场景中，它能帮助我们保持组件状态或避免昂贵的重新渲染。 - 思考:
<KeepAlive>与简单地使用v-if来显示/隐藏组件有什么本质区别？ - 休息: 短暂休息，放松一下。
- 内容:
-
番茄时钟 2 (25 分钟工作 + 5 分钟休息):
- 内容:
<KeepAlive>与动态组件的基础使用。 - 活动: 设置一个简单的父组件，使用
<component :is="currentComponent">来切换两到三个简单的子组件（例如ComponentA.vue,ComponentB.vue）。在不使用<KeepAlive>的情况下，观察它们在切换时的生命周期钩子 (onMounted,onUnmounted) 在控制台的输出。 - 实践: 将
<component :is="...">用<KeepAlive>包裹起来。再次观察控制台输出。注意onUnmounted不再在切换时被调用。 - 休息: 快速调整状态。
- 内容:
-
番茄时钟 3 (25 分钟工作 + 5 分钟休息):
- 内容:
include,exclude,max属性。 - 活动: 学习
include和exclude属性，它们通过组件的name属性来控制哪些组件被缓存。理解max属性用于限制缓存的实例数量。 - 实践: 修改你的
<KeepAlive>配置，尝试使用include（例如，只缓存ComponentA）。然后尝试exclude。如果你有多个组件，也可以实验一下max。 - 休息: 短暂放松。
- 内容:
-
番茄时钟 4 (25 分钟工作 + 5 分钟休息):
- 内容:
<KeepAlive>相关的生命周期钩子 (onActivated,onDeactivated)。 - 活动: 阅读
onActivated和onDeactivated生命周期钩子的相关内容。理解这些钩子是专门为被<KeepAlive>包裹的组件设计的，并在缓存组件被激活/失活时触发。 - 实践: 在你被缓存的子组件中添加
onActivated和onDeactivated钩子，并在其中打印日志信息。切换组件时，观察控制台输出。 - 休息: 补充水分。
- 内容:
-
总结与回顾 (10-15 分钟):
- 回顾
<KeepAlive>的核心作用和用法。 - 确保你理解
include,exclude,max属性的工作方式。 - 确认你理解了
onActivated和onDeactivated钩子的执行时机。
- 回顾
Day 47: <Teleport> - 瞬移组件内容 (~3 小时)
- 本日目标: 学习如何使用
<Teleport>将组件的内容渲染到 DOM 树的不同位置，脱离组件自身的父子层级关系。 - 所需资源: Vue 3 官方文档 (
<Teleport>): https://cn.vuejs.org/guide/built-ins/teleport.html
学习计划:
-
番茄时钟 1 (25 分钟工作 + 5 分钟休息):
- 内容:
<Teleport>简介及其应用场景。 - 活动: 阅读官方文档中关于
<Teleport>的介绍。理解它在哪些场景下有用，比如模态框 (Modals)、通知 (Notifications) 或工具提示 (Tooltips)，当你希望内容在视觉上位于其他所有内容之上（例如，直接在<body>标签下），但在逻辑上仍由其组件管理时。 - 思考: 相较于常规的组件渲染方式，
<Teleport>解决了哪些问题？ - 休息: 为接下来的实践做好准备。
- 内容:
-
番茄时钟 2 (25 分钟工作 + 5 分钟休息):
- 内容:
<Teleport>的基础使用。 - 活动: 在你的
public/index.html文件中，添加一个新的空div元素并为其指定一个 ID (例如，<div id="teleport-target"></div>)。 - 实践: 创建一个简单的子组件 (
MyModal.vue)，包含一些内容。用<Teleport to="#teleport-target">包裹其内容。在另一个组件（例如App.vue）中渲染MyModal.vue。观察在 DOM 结构中，MyModal的内容是否出现在#teleport-target中，即使MyModal在逻辑上是App.vue的子组件。 - 休息: 检查 DOM 结构以确认。
- 内容:
-
番茄时钟 3 (25 分钟工作 + 5 分钟休息):
- 内容:
<Teleport>与组件状态的结合。 - 活动: 理解
<Teleport>只移动渲染的 DOM 节点，而不改变组件的逻辑父子关系。组件仍然可以从其实际父组件接收 Props，并向其父组件发出事件。 - 实践: 在
App.vue中添加一个响应式变量 (isOpen = ref(false)) 和一个按钮来切换isOpen。使用v-if="isOpen"来条件性渲染MyModal。在MyModal中添加依赖App.vue传入的 Props 的内容，或者发出事件回传给App.vue。确认状态和事件处理仍然按预期工作。 - 休息: 短暂放松。
- 内容:
-
番茄时钟 4 (25 分钟工作 + 5 分钟休息):
- 内容: 同一目标上的多个
<Teleport>和disabled属性。 - 活动: 了解多个
<Teleport>组件可以挂载到同一个目标元素，它们的内容将按顺序追加。理解disabled属性可以条件性地启用/禁用传送功能。 - 实践: 创建两个不同的模态框组件，并将它们都传送到同一个目标。观察它们的渲染顺序。然后，给其中一个或两个添加
disabled属性，并切换它，观察内容从目标元素中出现/消失。 - 休息: 补充能量。
- 内容: 同一目标上的多个
-
总结与回顾 (10-15 分钟):
- 总结
<Teleport>的主要应用场景。 - 确认你能成功将内容传送到不同的 DOM 位置，同时保持组件的逻辑。
- 理解
disabled属性以及多个<Teleport>如何在同一目标上协作。
- 总结
Day 48: <Transition> 与 <TransitionGroup> - 动画与过渡 (~3 小时)
- 本日目标: 学习如何使用
<Transition>对单个元素/组件应用过渡效果，以及如何使用<TransitionGroup>对列表应用过渡效果，并通过 CSS 类来实现动画。 - 所需资源:
- Vue 3 官方文档 (
<Transition>): https://cn.vuejs.org/guide/built-ins/transition.html - Vue 3 官方文档 (
<TransitionGroup>): https://cn.vuejs.org/guide/built-ins/transition-group.html
- Vue 3 官方文档 (
学习计划:
-
番茄时钟 1 (25 分钟工作 + 5 分钟休息):
- 内容:
<Transition>简介与基础使用。 - 活动: 阅读官方文档中关于
<Transition>的内容。理解它用于对单个元素或组件应用进入/离开过渡。了解 Vue 会应用的六个过渡 CSS 类 (v-enter-from,v-enter-active,v-enter-to,v-leave-from,v-leave-active,v-leave-to)。 - 实践: 创建一个简单的元素（例如，一个带有文本的
div），并使用v-if条件性渲染它。用<Transition>包裹这个元素。添加基本的 CSS 类（例如，v-enter-active,v-leave-active带有transition属性），使其能实现淡入/淡出效果。 - 休息: 离开屏幕，放松眼睛。
- 内容:
-
番茄时钟 2 (25 分钟工作 + 5 分钟休息):
- 内容: 自定义
<Transition>类名与模式。 - 活动: 学习如何通过
name属性自定义过渡类名（例如，<Transition name="fade">会使用fade-enter-active）。理解mode属性（in-out,out-in）用于管理同时进行的进入/离开过渡。 - 实践: 给你的
<Transition>添加一个name属性，并相应地更新你的 CSS 类。当在<Transition>内部使用v-if/v-else切换两个不同组件时，尝试使用mode="out-in"。 - 休息: 快速的思维切换。
- 内容: 自定义
-
番茄时钟 3 (25 分钟工作 + 5 分钟休息):
- 内容:
<TransitionGroup>简介与列表过渡。 - 活动: 阅读官方文档中关于
<TransitionGroup>的内容。理解它专门用于对使用v-for渲染的元素列表应用进入/离开/移动过渡。注意它默认会渲染一个包装元素（<span>），除非你指定了tag属性。 - 实践: 创建一个简单的项目列表（例如，一个字符串数组）。使用
v-for渲染它们。添加按钮来向列表中添加/删除项目。 - 休息: 准备进行更多编码。
- 内容:
-
番茄时钟 4 (25 分钟工作 + 5 分钟休息):
- 内容:
<TransitionGroup>的基础使用和v-move类。 - 活动: 用
<TransitionGroup>包裹你的v-for列表。理解v-move类，它在列表项重新排序时应用，用于平滑的动画效果。 - 实践: 为你的列表添加
v-enter-active,v-leave-active（用于新添加/删除的项目）和v-move（用于重新排序的项目）的 CSS。当添加、删除或重新排序项目（例如通过排序数组）时，观察过渡效果。记住在<TransitionGroup>内部的v-for项中添加:key。 - 休息: 深呼吸。
- 内容:
-
总结与回顾 (10-15 分钟):
- 总结
<Transition>与<TransitionGroup>的区别和应用场景。 - 确保你理解了相关的核心 CSS 类 (
-enter-from,-enter-active,-enter-to,-leave-from,-leave-active,-leave-to,v-move)。 - 思考这些内置组件如何通过添加视觉效果显著提升用户体验。
- 总结
