Vue百日学习计划Day36-42天详细计划-Gemini版

总目标: 在 Day 36-42 理解组件化开发的思想，熟练掌握 Vue 组件的注册、Props、Events、v-model、Slots、Provide/Inject 等核心概念和实践，能够构建可复用和易于维护的组件结构。

• 所需资源:
  • Vue 3 官方文档 (组件基础): https://cn.vuejs.org/guide/essentials/component-basics.html
  • Vue 3 官方文档 (组件深入): https://cn.vuejs.org/guide/components/registration.html （此链接及后续部分覆盖注册、Props、Events、v-model、Slots、Provide/Inject、动态与异步组件）
  • 你的 Vue 3 实践项目（作为实践环境）。

Day 36: 组件基础与注册 (~3 小时)

• 本日目标: 理解组件化思想，学会创建和注册 Vue 单文件组件（SFC），并在应用中使用它们。

• 学习计划:

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

    • 内容: 为什么需要组件化？
    • 活动: 阅读官方文档“组件基础”引言，理解组件化带来的好处（代码复用、可维护性、关注点分离）。思考如何将一个复杂的页面拆分成独立的逻辑块。
    • 思考: 在你日常看到的网页中，哪些部分可以被抽象成可复用的组件？
    • 休息: 短暂休息。

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

    • 内容: 创建单文件组件 (.vue)。
    • 活动: 阅读官方文档“单文件组件”部分。了解 .vue 文件结构（<template>, <script setup>, <style>）。创建一个新的 .vue 文件，编写最基础的组件代码（包含一个模板和一个简单的 <script setup> 块）。
    • 实践: 在你的项目 src/components 目录下创建一个 MyComponent.vue 文件，添加基础模板和空的 script/style 块。
    • 休息: 短暂休息。

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

    • 内容: 局部组件注册。
    • 活动: 阅读官方文档“组件注册”部分关于局部注册的内容。理解在 <script setup> 中导入组件后，无需额外注册步骤，直接在模板中使用即可。
    • 实践: 在 src/App.vue 或其他父组件中，导入你创建的 MyComponent.vue，并在父组件的 <template> 中使用 <MyComponent/> 标签。运行项目，确认子组件被渲染。
    • 休息: 短暂休息。

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

    • 内容: 全局组件注册 (了解)。
    • 活动: 阅读官方文档关于全局注册的内容。理解全局注册的组件可以在应用中的任何地方直接使用，无需导入。了解它的优缺点（方便但可能导致打包体积过大，且依赖不明确），以及为什么在现代构建工具下更推荐局部注册。
    • 实践: (可选，了解概念为主) 如果你的项目使用 main.js 作为入口，尝试在 main.js 中使用 app.component() 方法注册一个组件。
    • 休息: 短暂休息。

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

    • 回顾组件化思想、.vue 文件结构。
    • 巩固局部组件注册是现代 Vue 开发的主要方式。
    • 确保你能在父组件中成功使用子组件。

Day 37: 组件通信 - Props (~3 小时)

• 本日目标: 学习如何使用 Props 实现父组件向子组件传递数据。

• 所需资源: Vue 3 官方文档 (Props): https://cn.vuejs.org/guide/components/props.html

• 学习计划:

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

    • 内容: Props 的概念与声明 (defineProps)。
    • 活动: 阅读官方文档“Props”部分。理解 Props 是组件接收外部数据的接口，数据流是单向的（父 -> 子）。学习在子组件的 <script setup> 中使用 defineProps 宏来声明组件接受的 Props。
    • 实践: 在 Day 36 创建的 MyComponent.vue 中，使用 defineProps(['message']) 声明一个 message prop。
    • 休息: 短暂休息。

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

    • 内容: 在模板和脚本中使用 Props。
    • 活动: 理解声明的 Props 可以直接在子组件的模板中像普通变量一样使用，在脚本中则可以通过 defineProps 的返回值访问（如果需要）。
    • 实践: 在 MyComponent.vue 的 <template> 中显示 {{ message }}。在父组件使用子组件时，通过属性绑定 :message="'Hello from Parent!'" 传递数据。
    • 休息: 短暂休息。

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

    • 内容: Props 类型校验 (基础)。
    • 活动: 阅读官方文档关于 Props 类型校验的部分。学习如何为 Props 指定预期的 JavaScript 数据类型（String, Number, Boolean, Array, Object, Date, Function, Symbol）。理解类型校验失败时会发出控制台警告（仅在开发模式）。
    • 实践: 将 defineProps(['message']) 改为 defineProps({ message: String })。尝试传递非字符串类型的数据，观察警告。为其他数据类型添加校验。
    • 休息: 短暂休息。

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

    • 内容: Props 类型校验 (必填与默认值)。
    • 活动: 学习如何将 Prop 标记为必填 (required: true) 以及如何为 Prop 设置默认值 (default: ...)。理解不同数据类型的默认值写法（特别是对象/数组默认值需要通过工厂函数返回）。
    • 实践: 将 message Prop 设为必填。为另一个 Prop 设置默认值。设置一个对象 Prop，并使用工厂函数设置默认值。
    • 休息: 短暂休息。

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

    • 回顾 Props 的概念、声明、使用。
    • 巩固 Props 类型校验的各种方式（类型、必填、默认值）。
    • 确保理解 Props 的单向数据流原则：子组件不应直接修改 Prop 的值。

Day 38: 组件通信 - Events (~3 小时)

• 本日目标: 学习如何使用 Events 实现子组件向父组件传递信息或通知。

• 所需资源: Vue 3 官方文档 (Events): https://cn.vuejs.org/guide/components/events.html

• 学习计划:

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

    • 内容: Events 的概念与声明 (defineEmits)。
    • 活动: 阅读官方文档“组件事件”部分。理解事件用于子组件向父组件“发出信号”。学习在子组件的 <script setup> 中使用 defineEmits 宏来声明组件会发出的事件。声明 emitted 事件有助于文档化和校验。
    • 实践: 在一个子组件（例如一个按钮组件 MyButton.vue）中，使用 defineEmits(['click']) 声明一个 click 事件。
    • 休息: 短暂休息。

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

    • 内容: 触发事件 ($emit)。
    • 活动: 学习在子组件的方法中或通过 DOM 事件监听器来调用 $emit 函数触发声明的事件。
    • 实践: 在 MyButton.vue 中，给 <button> 元素添加一个 @click="$emit('click')"。
    • 休息: 短暂休息。

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

    • 内容: 在父组件监听事件 (v-on 或 @)。
    • 活动: 阅读官方文档关于监听事件的部分。理解在父组件中使用子组件时，可以通过 v-on: 或其缩写 @ 来监听子组件发出的事件，并绑定一个父组件的方法来响应。
    • 实践: 在父组件中使用 MyButton，并添加 @click="handleButtonClick"，在父组件的 <script setup> 中定义 handleButtonClick 方法（例如弹出一个 alert）。
    • 休息: 短短休息。

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

    • 内容: 传递参数与事件校验 (可选)。
    • 活动: 学习在 $emit 时可以传递额外的参数给父组件的事件处理函数。了解 defineEmits 也可以接收一个对象进行更详细的事件校验（可选，但了解一下）。
    • 实践: 修改 MyButton.vue，在 $emit('click', 'some data', 123) 时传递一些参数。在父组件的 handleButtonClick(data1, data2) 方法中接收并打印这些参数。
    • 休息: 短暂休息。

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

    • 回顾 Events 的概念、声明 (defineEmits)、触发 ($emit)、监听 (@)。
    • 巩固如何通过事件传递数据从子到父。
    • 确保你能构建一个父子组件，父组件向子组件传文本 (Props)，子组件点击按钮向父组件发送消息 (Events)。

Day 39: Props/Events 实践与 v-model 应用于组件 (~3 小时)

• 本日目标: 通过实践巩固 Props 和 Events 的用法，并学习如何使你的自定义组件支持 v-model。

• 所需资源:

  • Vue 3 官方文档 (Props): https://cn.vuejs.org/guide/components/props.html
  • Vue 3 官方文档 (Events): https://cn.vuejs.org/guide/components/events.html
  • Vue 3 官方文档 (在组件上使用 v-model): https://cn.vuejs.org/guide/components/v-model.html

• 学习计划:

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

    • 内容: Props 与 Events 综合实践。
    • 活动: 构建一个更复杂的父子组件交互示例。例如：一个列表组件 (父) 渲染多个列表项组件 (子)。父组件通过 Props 将数据传递给每个列表项。每个列表项有一个删除按钮，点击时通过 Events 通知父组件删除对应的项（传递项的 ID 或索引）。
    • 实践: 实现上述列表与列表项的示例。
    • 休息: 短暂休息。

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

    • 内容: v-model 在组件上的概念。
    • 活动: 阅读官方文档“在组件上使用 v-model”部分。理解 v-model 在组件上是 Prop 和 Event 的语法糖。默认情况下，v-model 绑定到 modelValue Prop 并监听 update:modelValue 事件。
    • 思考: 为什么 Vue 需要这个语法糖？它简化了什么？
    • 休息: 短暂休息。

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

    • 内容: 实现组件的 v-model 支持。
    • 活动: 学习如何在你的自定义输入组件中接收 modelValue Prop，并在需要更新值时触发 update:modelValue 事件。
    • 实践: 创建一个简单的自定义文本输入组件 (MyInput.vue)。声明 modelValue Prop (defineProps(['modelValue'])) 和 update:modelValue 事件 (defineEmits(['update:modelValue']))。在内部 <input> 元素的 @input 事件中，调用 $emit('update:modelValue', $event.target.value)。
    • 休息: 短暂休息。

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

    • 内容: 使用自定义 v-model 组件。
    • 活动: 在父组件中，使用你创建的 MyInput 组件，并使用 v-model 绑定一个响应式变量。
    • 实践: 在父组件中定义一个 text = ref('')。在模板中使用 <MyInput v-model="text"/>。在父组件模板中显示 {{ text }}，观察输入框和显示是否同步。
    • 休息: 短暂休息。

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

    • 巩固 Props 和 Events 是组件通信的基础方式。
    • 理解 v-model 在组件上的实现原理和使用方法。
    • 确保你的自定义输入组件能够成功支持 v-model。

Day 40: 组件内容分发 - Slots (~3 小时)

• 本日目标: 学习如何使用 Slots 实现父组件向子组件插入内容，使组件更具灵活性和可复用性。

• 所需资源: Vue 3 官方文档 (Slots): https://cn.vuejs.org/guide/components/slots.html

• 学习计划:

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

    • 内容: Slots 的概念与默认插槽。
    • 活动: 阅读官方文档“插槽”部分。理解 Slots 是组件模板中的占位符，允许父组件将任意内容“注入”到子组件的指定位置。学习默认插槽 <slot></slot>。
    • 实践: 创建一个容器组件 (MyCard.vue)，其中有一个 <slot></slot> 占位符。在父组件使用 MyCard 时，在 <MyCard>...</MyCard> 标签中间放入一些 HTML 内容，观察这些内容如何出现在子组件 <slot> 的位置。
    • 休息: 短暂休息。

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

    • 内容: 具名插槽 (<slot name="...">)。
    • 活动: 学习如何使用具名插槽，通过 name 属性区分不同的插槽。学习在父组件中使用 v-slot:name 或 #name 指令来指定内容要插入到哪个具名插槽。
    • 实践: 修改 MyCard.vue，添加 <slot name="header"></slot> 和 <slot name="footer"></slot>。在父组件中，使用 <template #header>...</template> 和 <template #footer>...</template> 将内容分别插入到头部和尾部插槽。
    • 休息: 短暂休息。

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

    • 内容: 作用域插槽 (Scoped Slots) 的概念。
    • 活动: 阅读官方文档关于作用域插槽的内容。理解作用域插槽允许子组件向父组件的插槽内容暴露数据。这使得父组件可以根据子组件提供的数据来决定如何渲染插槽内容。
    • 思考: 作用域插槽解决什么问题？（父组件需要使用子组件内部的数据来控制渲染）。
    • 休息: 短暂休息。

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

    • 内容: 使用作用域插槽 (<slot :propName="...">, v-slot:name="slotProps")。
    • 活动: 学习在子组件的 <slot> 标签上绑定属性来暴露数据（这些属性会作为对象传递给父组件的插槽）。学习在父组件的 <template v-slot:name="slotProps"> 或 <template #name="slotProps"> 中通过 slotProps 对象访问子组件暴露的数据。
    • 实践: 修改一个组件（例如列表项组件），在 <slot> 标签上绑定一项数据，如 <slot :item="itemData"></slot>。在父组件使用时，通过 <template #default="{ item }"> {{ item.name }} </template> 的方式接收并使用这个数据来渲染列表项内容。
    • 休息: 短暂休息。

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

    • 回顾 Slots 的概念、默认插槽、具名插槽。
    • 重点巩固作用域插槽的用法和它解决的问题。
    • 确保你能构建一个包含不同类型插槽的组件，并在父组件中正确使用它们。

Day 41: 组件通信 - Provide/Inject 与 Slots 实践 (~3 小时)

• 本日目标: 学习 Provide/Inject 实现跨层级组件通信，并通过实践巩固 Slots 用法。

• 所需资源:

  • Vue 3 官方文档 (Slots): https://cn.vuejs.org/guide/components/slots.html
  • Vue 3 官方文档 (Provide / Inject): https://cn.vuejs.org/guide/components/provide-inject.html

• 学习计划:

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

    • 内容: Slots 综合实践。
    • 活动: 结合默认插槽、具名插槽和作用域插槽，构建一个更复杂的组件示例。例如：一个模态框（Modal）组件，包含头部、内容和底部插槽，内容插槽是一个作用域插槽，可以暴露模态框的开关状态给父组件，让父组件决定显示什么内容。
    • 实践: 实现一个 Modal 组件，包含头部（具名）、内容（作用域）和底部（具名）插槽。
    • 休息: 短暂休息。

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

    • 内容: Provide/Inject 的概念。
    • 活动: 阅读官方文档“Provide / Inject”部分。理解 Provide/Inject 提供了一种“依赖注入”的方式，允许一个祖先组件向其所有后代提供数据，无论层级有多深。理解它解决了 Prop Drilling（逐层传递 Prop）的问题。
    • 思考: 什么场景下 Provide/Inject 比 Props 更合适？（数据需要在多个层级深的后代组件中使用）。
    • 休息: 短暂休息。

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

    • 内容: 使用 provide 提供数据。
    • 活动: 学习在祖先组件的 <script setup> 中使用 provide 函数来提供数据。提供的数据可以是静态值，也可以是响应式数据。通常推荐提供响应式数据（使用 ref 或 reactive）。
    • 实践: 创建一个顶层组件（祖先），导入 provide 和 ref。使用 provide('my-key', myData) 提供一个响应式数据 myData = ref('Initial Data')。
    • 休息: 短暂休息。

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

    • 内容: 使用 inject 注入数据。
    • 活动: 学习在后代组件的 <script setup> 中使用 inject 函数来注入祖先组件提供的数据。理解 inject 函数的第一个参数是提供时使用的 key，第二个参数是找不到提供数据时的默认值。
    • 实践: 创建一个中间组件和一个底层组件（后代）。在底层组件中，导入 inject，使用 const injectedData = inject('my-key', 'Default Value') 注入数据。在模板中显示 {{ injectedData }}。在顶层组件和底层组件之间嵌套中间组件。观察数据是否成功注入。
    • 休息: 短暂休息。

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

    • 巩固 Slots（默认、具名、作用域）的用法。
    • 理解 Provide/Inject 的概念和它解决的问题（Prop Drilling）。
    • 掌握 provide 和 inject 的基本使用。

Day 42: 动态组件、异步组件与综合回顾 (~3.5 小时)

• 本日目标: 学习动态加载和异步加载组件的技术，并对组件化开发的各种知识进行全面回顾。

• 所需资源:

  • Vue 3 官方文档 (动态组件): https://cn.vuejs.org/guide/components/dynamic-async.html#dynamic-components
  • Vue 3 官方文档 (异步组件): https://cn.vuejs.org/guide/components/dynamic-async.html#async-components

• 学习计划:

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

    • 内容: 动态组件 (<component :is="...">)。
    • 活动: 阅读官方文档关于动态组件的部分。理解 <component :is="..."> 允许你根据一个响应式变量的值来动态切换要渲染的组件。
    • 实践: 创建几个简单的组件（例如 Home.vue, About.vue, Contact.vue）。在父组件中定义一个响应式变量 currentComponent = ref('Home')。在模板中使用 <component :is="currentComponent"></component>。添加按钮，点击时修改 currentComponent 的值，观察渲染的组件是否切换。
    • 休息: 短暂休息。

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

    • 内容: 动态组件与 <KeepAlive> (了解)。
    • 活动: 简单了解 <KeepAlive> 组件可以缓存动态组件的实例，避免在切换时销毁和重建。理解它对性能的潜在影响。
    • 实践: (可选) 将 <component :is="..."> 包裹在 <KeepAlive> 中，观察组件切换时是否会重新执行生命周期钩子（如果缓存，则不会）。
    • 休息: 短暂休息。

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

    • 内容: 异步组件 (defineAsyncComponent) 的概念。
    • 活动: 阅读官方文档关于异步组件的部分。理解异步组件用于延迟加载组件的代码块，直到需要渲染时才从服务器加载。这有助于减小初始打包体积，提高应用的首屏加载速度（代码分割）。
    • 思考: 异步组件主要解决什么问题？
    • 休息: 短暂休息。

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

    • 内容: 使用 defineAsyncComponent。
    • 活动: 学习使用 defineAsyncComponent 函数来定义一个异步组件。它接收一个加载函数，通常是动态导入 (import())。了解异步组件可以配合 Suspense 或具有加载、错误、超时状态处理（虽然这些可能不是本次计划的重点，但要知晓）。
    • 实践: 将之前创建的一个不太重要的组件（例如某个设置页面的组件）改为异步组件：const AsyncComponent = defineAsyncComponent(() => import('./components/MyHeavyComponent.vue'))。在父组件中使用 <AsyncComponent/>。
    • 休息: 短短休息。

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

    • 内容: 综合回顾：组件通信方式总结。
    • 活动: 花时间回顾并总结所有学过的组件间通信方式：Props (父->子)、Events (子->父)、v-model (父<->子，语法糖)、Slots (父->子，内容分发)、Provide/Inject (祖先->后代)。思考它们各自的适用场景和优缺点。
    • 思考: 对于一个特定的通信需求，你会选择哪种方式？为什么？
    • 休息: 短暂休息。

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

    • 内容: 综合实践与问题解答。
    • 活动: 尝试构建一个稍复杂的示例，结合使用多种通信方式。例如：一个简单的用户列表，使用 v-for 渲染，每个列表项是子组件，子组件通过 Props 接收用户数据，通过 Events 删除用户。列表顶部有一个过滤输入框，父组件通过 Props 传递过滤文本给子组件，或者子组件通过 Events 向上报告过滤文本。或者尝试用 Slots 渲染列表项的不同部分。遇到问题，查阅文档或回顾之前的学习内容。
    • 实践: 选择一个综合实践场景并开始实现。
    • 休息: 短暂休息。

  • 最终回顾 (10-15 分钟):

    • 确保对组件化开发的整体流程和各个核心概念有了清晰的认识。
    • 回顾掌握程度，标记薄弱环节以便后续加强。
    • 思考如何将这些知识应用到实际项目开发中。

掌握检查:

• 在 Day 42 结束时，你应该能够：
  • 独立创建和使用局部注册的 Vue 单文件组件。
  • 使用 defineProps 声明 Props 并进行类型校验、设置必填和默认值。
  • 使用 defineEmits 声明事件，通过 $emit 触发事件，并在父组件使用 @ 监听事件和接收参数。
  • 实现一个支持 v-model 的自定义表单输入组件。
  • 使用默认插槽、具名插槽和作用域插槽来灵活分发内容。
  • 使用 provide 和 inject 实现跨层级的数据传递。
  • 理解 <component :is="..."> 实现动态组件切换。
  • 理解 defineAsyncComponent 实现异步组件加载的概念。
  • 能够根据不同的需求场景，选择合适的组件间通信方式。