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'])声明一个messageprop。 - 休息: 短暂休息。
- 内容: Props 的概念与声明 (
-
番茄时钟 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: ...)。理解不同数据类型的默认值写法（特别是对象/数组默认值需要通过工厂函数返回）。 - 实践: 将
messageProp 设为必填。为另一个 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事件。 - 休息: 短暂休息。
- 内容: Events 的概念与声明 (
-
番茄时钟 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)。
- 回顾 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绑定到modelValueProp 并监听update:modelValue事件。 - 思考: 为什么 Vue 需要这个语法糖？它简化了什么？
- 休息: 短暂休息。
- 内容:
-
番茄时钟 3 (25 分钟工作 + 5 分钟休息):
- 内容: 实现组件的
v-model支持。 - 活动: 学习如何在你的自定义输入组件中接收
modelValueProp，并在需要更新值时触发update:modelValue事件。 - 实践: 创建一个简单的自定义文本输入组件 (
MyInput.vue)。声明modelValueProp (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实现异步组件加载的概念。 - 能够根据不同的需求场景，选择合适的组件间通信方式。