Vue百日学习计划Day33-35天详细计划-Gemini版

总目标: 在 Day 33-35 理解 Vue 组件从创建到销毁的完整生命周期，熟练掌握 Composition API 中主要的生命周期钩子，并知道在不同阶段执行哪些操作。

• 所需资源:
  • Vue 3 官方文档 (生命周期钩子): https://cn.vuejs.org/guide/essentials/lifecycle.html
  • 你的 Vue 3 实践项目。

---

Day 33: 生命周期钩子 - 创建与挂载阶段 (~3 小时)

• 本日目标: 理解组件生命周期的概念，学习 Composition API 中创建和挂载阶段的钩子 (onBeforeMount, onMounted)。

• 学习计划:

  • 番茄时钟 1 (25 分钟工作 + 5 分钟休息):

    • 内容: 组件生命周期是什么？
    • 活动: 阅读官方文档“生命周期钩子”部分的引言，理解组件从创建、挂载到 DOM、更新、最终销毁的各个阶段。理解生命周期钩子允许我们在特定阶段执行自定义逻辑。
    • 思考: 为什么我们需要在组件生命周期的特定时刻执行代码？
    • 休息: 短暂休息。

  • 番茄时钟 2 (25 分钟工作 + 5 分钟休息):

    • 内容: onBeforeMount 钩子。
    • 活动: 阅读官方文档关于 onBeforeMount 的内容。理解此钩子在组件被挂载到 DOM 之前执行。此时模板已经编译，但尚未创建真实的 DOM 节点。你可以访问组件的状态，但无法访问 DOM 元素。
    • 实践: 在你的实践项目组件中使用 <script setup> 导入 onBeforeMount，并在其中添加一个 console.log('onBeforeMount')。
    • 休息: 短暂休息。

  • 番茄时钟 3 (25 分钟工作 + 5 分钟休息):

    • 内容: onMounted 钩子。
    • 活动: 阅读官方文档关于 onMounted 的内容。理解此钩子在组件被挂载到 DOM 之后执行。此时组件的 DOM 节点已经被创建并插入到文档中，你可以访问真实的 DOM 元素。这是执行需要访问 DOM、发送网络请求、订阅外部事件等的理想位置。
    • 实践: 导入 onMounted，添加 console.log('onMounted')。在 onMounted 中尝试使用 document.getElementById 或 ref 获取组件模板中的某个元素并打印它。
    • 休息: 短暂休息。

  • 番茄时钟 4 (25 分钟工作 + 5 分钟休息):

    • 内容: 实践：观察创建与挂载顺序。
    • 活动: 同时在 <script setup> 顶层（setup 代码本身）、onBeforeMount 和 onMounted 中添加不同的 console.log 语句。在浏览器中查看控制台输出，观察它们的执行顺序。多次刷新页面，确保理解每次挂载时的顺序。
    • 思考: setup 代码、onBeforeMount 和 onMounted 的执行顺序是怎样的？为什么是这个顺序？
    • 休息: 短暂休息。

  • 总结与回顾 (10-15 分钟):

    • 回顾组件创建和挂载阶段的钩子 (onBeforeMount, onMounted)。
    • 确认理解它们执行的时机以及各自适合执行的操作（能否访问 DOM）。
    • 确保实践代码能够清晰展示钩子的执行顺序。

---

Day 34: 生命周期钩子 - 更新与卸载阶段 (~3.5 小时)

• 本日目标: 学习组件更新和卸载阶段的钩子 (onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted)。

• 所需资源: Vue 3 官方文档 (生命周期钩子): https://cn.vuejs.org/guide/essentials/lifecycle.html

• 学习计划:

  • 番茄时钟 1 (25 分钟工作 + 5 分钟休息):

    • 内容: onBeforeUpdate 钩子。
    • 活动: 阅读官方文档关于 onBeforeUpdate 的内容。理解此钩子在响应式数据发生变化，组件即将重新渲染到 DOM 之前执行。你可以在此访问更新前的 DOM 状态。
    • 实践: 在组件中添加一个响应式变量（如计数器），添加 onBeforeUpdate 钩子，并打印 console.log('onBeforeUpdate') 以及更新前的 DOM 内容（如果可以获取到）。
    • 休息: 短暂休息。

  • 番茄时钟 2 (25 分钟工作 + 5 分钟休息):

    • 内容: onUpdated 钩子。
    • 活动: 阅读官方文档关于 onUpdated 的内容。理解此钩子在响应式数据变化，组件重新渲染并更新到 DOM 之后执行。此时可以访问更新后的 DOM 状态。
    • 实践: 添加 onUpdated 钩子，并打印 console.log('onUpdated') 以及更新后的 DOM 内容。通过修改响应式变量，观察 onBeforeUpdate 和 onUpdated 的执行顺序。
    • 休息: 短暂休息。

  • 番茄时钟 3 (25 分钟工作 + 5 分钟休息):

    • 内容: 实践：观察更新顺序。
    • 活动: 结合 Day 33 的 onMounted，修改组件的响应式数据（例如点击按钮使计数器增加）。观察控制台中 onMounted, onBeforeUpdate, onUpdated 的执行顺序。多次修改数据，观察更新钩子的重复执行。
    • 思考: 为什么更新钩子会在每次数据改变并触发渲染时执行？
    • 休息: 短暂休息。

  • 番茄时钟 4 (25 分钟工作 + 5 分钟休息):

    • 内容: onBeforeUnmount 钩子。
    • 活动: 阅读官方文档关于 onBeforeUnmount 的内容。理解此钩子在组件实例被销毁 之前执行。此时组件仍然完全可用，你可以进行一些清理工作，例如停止定时器、取消网络请求、移除事件监听器等。
    • 实践: 添加 onBeforeUnmount 钩子，并打印 console.log('onBeforeUnmount')。设置一个假的定时器，并计划在 onBeforeUnmount 中清除它。
    • 休息: 短暂休息。

  • 番茄时钟 5 (25 分钟工作 + 5 分钟休息):

    • 内容: onUnmounted 钩子。
    • 活动: 阅读官方文档关于 onUnmounted 的内容。理解此钩子在组件实例被销毁 之后执行。此时组件的 DOM 节点已经被从文档中移除。这是进行最后清理的阶段。
    • 实践: 添加 onUnmounted 钩子，并打印 console.log('onUnmounted')。
    • 休息: 短暂休息。

  • 番茄时钟 6 (25 分钟工作 + 5 分钟休息):

    • 内容: 实践：观察卸载顺序与清理。
    • 活动: 创建一个父组件，使用 v-if 控制子组件的显示与隐藏。在子组件中添加所有学过的钩子日志。通过切换 v-if 的条件，使子组件被销毁，观察控制台中卸载钩子 (onBeforeUnmount, onUnmounted) 的执行顺序。确保在 onBeforeUnmount 或 onUnmounted 中清除了 Day 33 onMounted 中设置的任何监听或 Day 34 设置的定时器。
    • 思考: 清理工作为什么重要？为什么要在卸载阶段进行？
    • 休息: 短短休息。

  • 总结与回顾 (10-15 分钟):

    • 回顾更新和卸载阶段的钩子及其执行时机。
    • 巩固清理工作的重要性以及在 onBeforeUnmount 中进行清理的常见场景。
    • 确保通过实践理解了组件的完整生命周期流程。

---

Day 35: 生命周期钩子 - 对比与其他钩子 (~3 小时)

• 本日目标: 对比 Composition API 和 Options API 的生命周期钩子，了解其他一些不常用的钩子。

• 所需资源: Vue 3 官方文档 (生命周期钩子): https://cn.vuejs.org/guide/essentials/lifecycle.html

• 学习计划:

  • 番茄时钟 1 (25 分钟工作 + 5 分钟休息):

    • 内容: Composition API vs Options API 生命周期钩子对比 (创建/挂载)。
    • 活动: 阅读官方文档中关于钩子对比的部分。对比 setup vs beforeCreate/created，onBeforeMount vs beforeMount，onMounted vs mounted。理解在 Composition API 中，setup 函数取代了 beforeCreate 和 created 的功能。
    • 思考: 在 <script setup> 中，代码是在哪个 Options API 钩子之前/之后执行？
    • 休息: 短暂休息。

  • 番茄时钟 2 (25 分钟工作 + 5 分钟休息):

    • 内容: Composition API vs Options API 生命周期钩子对比 (更新/卸载)。
    • 活动: 对比 onBeforeUpdate vs beforeUpdate，onUpdated vs updated，onBeforeUnmount vs beforeUnmount，onUnmounted vs unmounted。理解它们之间的对应关系是一对一的，只是名称和用法不同。
    • 思考: 如果一个组件同时使用了 Options API 和 Composition API 的钩子，它们的执行顺序是怎样的？（Options API 的同名钩子会先于 Composition API 的钩子执行，但通常不建议混用）。
    • 休息: 短暂休息。

  • 番茄时钟 3 (25 分钟工作 + 5 分钟休息):

    • 内容: onActivated 和 onDeactivated 钩子。
    • 活动: 阅读官方文档关于这两个钩子的内容。理解它们用于配合 <KeepAlive> 组件，当组件被激活（从缓存中显示）或失活（被缓存）时触发。
    • 思考: <KeepAlive> 组件有什么作用？为什么它需要 onActivated 和 onDeactivated？
    • 休息: 短暂休息。

  • 番茄时钟 4 (25 分钟工作 + 5 分钟休息):

    • 内容: onErrorCaptured 钩子。
    • 活动: 阅读官方文档关于 onErrorCaptured 的内容。理解此钩子用于捕获来自后代组件的错误。
    • 思考: 这个钩子主要用于什么场景？（错误边界、统一错误处理）。
    • 休息: 短暂休息。

  • 番茄时钟 5 (25 分钟工作 + 5 分钟休息):

    • 内容: onRenderTracked 和 onRenderTriggered 钩子 (了解)。
    • 活动: 阅读官方文档关于这两个钩子的内容。理解它们是用于调试响应式渲染的高级钩子，可以告诉你是什么依赖被追踪了（Tracked）或是什么依赖触发了重新渲染（Triggered）。作为初学者，了解它们的存在和用途即可。
    • 实践: (可选) 在开发环境中尝试使用这两个钩子，触发一些响应式更新，观察控制台输出，加深理解响应式是如何工作的。
    • 休息: 短暂休息。

  • 总结与实践 (10-15 分钟):

    • 完整回顾 Composition API 和 Options API 的生命周期钩子对应关系。
    • 总结所有学过的 Composition API 钩子及其适用场景。
    • 思考在实际项目中，你会如何在 onMounted 中获取数据，在 onBeforeUnmount 中清理资源，以及何时可能用到 onActivated 或 onErrorCaptured。

---

掌握检查:

• 在 Day 35 结束时，你应该能够：
  • 说出 Vue 组件的主要生命周期阶段（创建、挂载、更新、卸载）。
  • 准确说出 onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted 这六个核心钩子在何时执行。
  • 知道在 onMounted 中可以安全地访问 DOM 并进行异步操作。
  • 知道在 onBeforeUnmount 中进行清理工作的重要性。
  • 了解 Composition API 的钩子与 Options API 的钩子之间的对应关系。
  • 知道 onActivated 和 onDeactivated 用于 <KeepAlive>，onErrorCaptured 用于错误捕获。
  • 能够在你的实践项目中，在合适的生命周期钩子中添加代码来执行特定任务。