当前位置：首页 > news >正文

Vue百日学习计划Day28-32天详细计划-Gemini版

news 来源：原创 2025/5/19 5:17:01

总目标: 在 Day 28-32 深入理解 Vue 3 的响应式机制，熟练掌握 Composition API 中的 setup, ref, reactive, toRefs, readonly, computed, watch, watchEffect 等核心 API 的使用。

所需资源:
- Vue 3 官方文档 (组合式 API): https://cn.vuejs.org/guide/introduction.html#composition-api
- Vue 3 官方文档 (响应式基础): https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html
- Vue 3 官方文档 (计算属性): https://cn.vuejs.org/guide/essentials/computed.html
- Vue 3 官方文档 (侦听器): https://cn.vuejs.org/guide/essentials/watchers.html
- Day 21-23 创建并运行成功的 Vue 3 项目（作为实践环境）。

Day 28: 初识 Composition API 与 ref (~3 小时)

本日目标: 了解 Composition API 的作用，学习 setup 函数以及如何使用 ref 创建响应式基本类型数据。
学习计划:
- 番茄时钟 1 (25 分钟工作 + 5 分钟休息):
  - 内容: 组合式 API 介绍与 setup 函数。
  - 活动: 阅读官方文档“组合式 API 介绍”部分，理解它出现的原因（解决 Options API 的痛点，更好地组织代码）。阅读关于 setup 函数的部分，理解它是组件中 Composition API 的入口，它何时执行，以及它应该返回什么。
  - 实践: 在你的 Vue 项目中创建一个新的 .vue 组件，尝试添加一个空的 setup() 函数或 <script setup> 块。
  - 休息: 短暂休息。
- 番茄时钟 2 (25 分钟工作 + 5 分钟休息):
  - 内容: ref 的基本使用。
  - 活动: 阅读官方文档“响应式基础”部分关于 ref 的内容。理解 ref 用于创建包含基本类型值（如字符串、数字、布尔值）的响应式引用。
  - 实践: 在 <script setup> 中导入 ref，创建一个计数器变量 count = ref(0)。
  - 休息: 短暂休息。
- 番茄时钟 3 (25 分钟工作 + 5 分钟休息):
  - 内容: 访问和修改 ref 的值 (.value)。
  - 活动: 理解在 <script setup> 或 JavaScript 代码中访问或修改 ref 的值需要通过其 .value 属性。
  - 实践: 添加一个方法 increment = () => { count.value++; }。
  - 休息: 短暂休息。
- 番茄时钟 4 (25 分钟工作 + 5 分钟休息):
  - 内容: ref 在模板中的使用 (自动解包)。
  - 活动: 理解 ref 在模板中访问时是不需要 .value 的，Vue 会自动帮助我们解包。
  - 实践: 在 <template> 中使用 {{ count }} 显示计数器。添加一个按钮，使用 @click="increment" 调用方法。观察点击按钮时页面上的数字是否响应式更新。
  - 休息: 短暂休息。
- 总结与回顾 (10-15 分钟):
  - 回顾 setup 函数的作用和书写方式（<script setup>）。
  - 巩固 ref 的创建、.value 访问/修改以及模板中的自动解包。
  - 确保你的计数器示例能够正常运行并响应式更新。

Day 29: reactive 与 toRefs (~3 小时)

本日目标: 学习如何使用 reactive 创建响应式对象和数组，理解 ref 和 reactive 的区别，并学习 toRefs 的用途。
所需资源: Vue 3 官方文档 (响应式基础): https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html
学习计划:
- 番茄时钟 1 (25 分钟工作 + 5 分钟休息):
  - 内容: reactive 的基本使用。
  - 活动: 阅读官方文档关于 reactive 的内容。理解 reactive 用于创建响应式的对象（包括普通对象、数组和 Map, Set 等集合类型）。
  - 实践: 在 <script setup> 中导入 reactive，创建一个用户对象 user = reactive({ name: 'Alice', age: 30 })。创建一个待办事项数组 todos = reactive([{ id: 1, text: 'Learn Vue' }, { id: 2, text: 'Build a project' }])。
  - 休息: 短暂休息。
- 番茄时钟 2 (25 分钟工作 + 5 分钟休息):
  - 内容: 访问和修改 reactive 对象/数组。
  - 活动: 理解直接访问和修改 reactive 返回的代理对象的属性或数组元素就是响应式的，不需要 .value。
  - 实践: 在模板中显示 {{ user.name }} 和 {{ user.age }}。使用 v-for 渲染 todos 列表。添加一个方法 updateUser = () => { user.age++; }，用按钮触发并观察变化。添加一个方法 addTodo = () => { todos.push({ id: todos.length + 1, text: 'New Task' }); }，用按钮触发并观察列表更新。
  - 休息: 短暂休息。
- 番茄时钟 3 (25 分钟工作 + 5 分钟休息):
  - 内容: ref vs reactive。
  - 活动: 阅读官方文档中关于 ref 和 reactive 区别的总结。理解 ref 用于基本类型和单个复杂对象/数组（推荐），reactive 主要用于包装根级对象/数组。理解它们的底层实现（ref 包裹在 { value: ... } 对象并通过 reactive 使这个对象响应式）。
  - 思考: 什么时候优先使用 ref？什么时候优先使用 reactive？（通常推荐优先使用 ref，因为它能处理所有类型，且在模板中更简洁）。
  - 休息: 短暂休息。
- 番茄时钟 4 (25 分钟工作 + 5 分钟休息):
  - 内容: toRefs 的使用场景。
  - 活动: 阅读官方文档关于 toRefs 的内容。理解 toRefs 的主要作用是在解构 reactive 对象时，保持属性的响应性。如果没有 toRefs，直接解构会丢失响应性。
  - 实践: 创建一个 reactive 对象 state = reactive({ foo: 1, bar: 2 })。对比直接解构 { foo, bar } = state 和使用 let { foo, bar } = toRefs(state) 在模板中显示时的响应性差异。
  - 休息: 短暂休息。
- 总结与回顾 (10-15 分钟):
  - 回顾 reactive 的用法以及与 ref 的核心区别。
  - 巩固 toRefs 在解构 reactive 对象时的重要性。
  - 确保所有实践示例都能按预期工作。

Day 30: 响应式原理基础与 readonly (~3 小时)

本日目标: 初步了解 Vue 3 响应式基于 Proxy 的原理，并学习 readonly 的作用。
所需资源: Vue 3 官方文档 (响应式基础): https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html (重点关注“它们是如何工作的？”)
学习计划:
- 番茄时钟 1 (25 分钟工作 + 5 分钟休息):
  - 内容: 响应式原理高层概述 (基于 Proxy)。
  - 活动: 阅读官方文档关于“响应式基础”中“它们是如何工作的？”部分。理解 Vue 3 如何利用 JavaScript 的 Proxy 对象来拦截对象的属性访问 (get) 和修改 (set)。理解依赖追踪 (track) 和触发更新 (trigger) 的概念。不需要深入底层实现细节，理解核心机制即可。
  - 思考: Proxy 相较于 Vue 2 的 Object.defineProperty 有何优势？
  - 休息: 短暂休息。
- 番茄时钟 2 (25 分钟工作 + 5 分钟休息):
  - 内容: ref 和 reactive 如何利用 Proxy。
  - 活动: 回顾 ref 和 reactive 的实现方式，理解 reactive 直接对对象/数组创建 Proxy，而 ref 是创建 { value: ... } 对象，然后对这个对象创建 Proxy。理解为什么访问 ref.value 会触发依赖。
  - 思考: 为什么直接替换一个 reactive 对象会丢失响应性？（因为它没有通过 Proxy 代理）。为什么可以直接替换 ref 的 .value？（因为 .value 属性是被 Proxy 代理的）。
  - 休息: 短暂休息。
- 番茄时钟 3 (25 分钟工作 + 5 分钟休息):
  - 内容: readonly 的基本使用。
  - 活动: 阅读官方文档关于 readonly 的内容。理解 readonly 可以创建一个对象的只读代理。尝试修改只读代理的属性会失败并在开发模式下发出警告。
  - 实践: 在 <script setup> 中导入 readonly。创建一个 reactive 或普通对象 original = reactive({ count: 0 })。创建只读版本 readOnlyCopy = readonly(original)。在模板中显示 readOnlyCopy.count。
  - 休息: 短暂休息。
- 番茄时钟 4 (25 分钟工作 + 5 分钟休息):
  - 内容: 尝试修改 readonly 对象。
  - 活动: 尝试通过 readOnlyCopy.count++ 的方式去修改只读代理的属性。观察浏览器控制台的警告信息。理解 readonly 是浅层的（默认），即如果对象属性是另一个对象，内部对象仍然是可变的（除非嵌套使用 readonly 或使用 shallowReadonly）。
  - 实践: 添加一个方法尝试修改 readOnlyCopy，通过按钮触发。观察警告。了解 shallowReadonly (可选，如果文档提到了)。
  - 休息: 短短休息。
- 总结与回顾 (10-15 分钟):
  - 回顾 Vue 3 响应式机制的高层原理（Proxy, track, trigger）。
  - 巩固 readonly 的用法和它提供的只读特性。
  - 理解为什么有时需要 readonly (例如，向外部暴露状态但不希望被修改)。

Day 31: 计算属性 (computed) (~3 小时)

本日目标: 学习如何使用 computed 创建依赖于其他响应式状态的派生状态。
所需资源: Vue 3 官方文档 (计算属性): https://cn.vuejs.org/guide/essentials/computed.html
学习计划:
- 番茄时钟 1 (25 分钟工作 + 5 分钟休息):
  - 内容: computed 的基本使用 (Getter)。
  - 活动: 阅读官方文档“计算属性”部分。理解 computed 创建一个响应式的“计算属性”，其值会根据依赖的响应式状态自动更新。学习最常见的用法：传入一个 getter 函数。
  - 实践: 在 <script setup> 中导入 computed。定义一个响应式变量 message = ref('Hello')。创建一个计算属性 reversedMessage = computed(() => message.value.split('').reverse().join(''))。
  - 休息: 短暂休息。
- 番茄时钟 2 (25 分钟工作 + 5 分钟休息):
  - 内容: computed 在模板中的使用与依赖追踪。
  - 活动: 理解计算属性在模板中直接使用即可，就像普通属性一样（也不需要 .value）。理解 Vue 会自动追踪计算属性 getter 函数中访问的响应式依赖。
  - 实践: 在模板中显示 {{ reversedMessage }}。添加一个按钮或输入框修改 message.value，观察 reversedMessage 是否自动更新。
  - 休息: 短暂休息。
- 番茄时钟 3 (25 分钟工作 + 5 分钟休息):
  - 内容: computed 与 Setter (Setter)。
  - 活动: 阅读官方文档关于计算属性 Setter 的内容。理解计算属性默认只有 getter，是只读的。如果需要通过修改计算属性来影响其依赖的原始数据，需要提供一个 Setter 函数。
  - 实践: 创建一个计算属性 fullName，依赖 firstName 和 lastName。为 fullName 添加一个 Setter，当设置 fullName 时，更新 firstName 和 lastName。使用 v-model 绑定到 fullName 在输入框中进行实践。
  - 休息: 短暂休息。
- 番茄时钟 4 (25 分钟工作 + 5 分钟休息):
  - 内容: computed vs 方法 (Methods)。
  - 活动: 阅读官方文档关于计算属性和方法对比的内容。理解计算属性是基于缓存的，只有当依赖的响应式状态改变时才会重新计算。方法每次调用都会执行。
  - 思考: 什么时候应该用 computed？什么时候应该用方法？（computed 适用于需要缓存的、依赖其他响应式状态的派生数据；方法适用于事件处理或不依赖响应式状态的普通逻辑）。
  - 休息: 短短休息。
- 总结与实践 (10-15 分钟):
  - 回顾 computed 的基本用法 (getter, setter)。
  - 巩固 computed 的缓存特性及其与方法的区别。
  - 尝试在你的实践项目中添加一个需要计算属性的场景，例如显示购物车总价、过滤列表等。

Day 32: 侦听器 (watch, watchEffect) (~3 小时)

本日目标: 学习如何使用 watch 和 watchEffect 来执行副作用，以响应响应式状态的变化。
所需资源: Vue 3 官方文档 (侦听器): https://cn.vuejs.org/guide/essentials/watchers.html
学习计划:
- 番茄时钟 1 (25 分钟工作 + 5 分钟休息):
  - 内容: watch 的基本使用 - 侦听单个源。
  - 活动: 阅读官方文档“侦听器”部分关于 watch 的内容。学习 watch 用于侦听特定的响应式数据源（一个 ref、一个 reactive 对象、一个 getter 函数）。
  - 实践: 在 <script setup> 中导入 watch。侦听之前创建的 count ref，当它变化时打印新的值和旧的值：watch(count, (newValue, oldValue) => { console.log('Count changed from', oldValue, 'to', newValue); });。
  - 休息: 短暂休息。
- 番茄时钟 2 (25 分钟工作 + 5 分钟休息):
  - 内容: watch 侦听多个源与选项。
  - 活动: 学习 watch 如何侦听一个数组的多个源。学习 watch 的选项，特别是 immediate: true (立即执行一次回调) 和 deep: true (深度侦听 reactive 对象的内部属性变化)。
  - 实践: 侦听一个 reactive 对象的某个属性 (() => user.age)。侦听整个 reactive 对象 (user, 需要 deep: true)。尝试使用 immediate: true 使侦听器在创建时立即执行。
  - 休息: 短暂休息。
- 番茄时钟 3 (25 分钟工作 + 5 分钟休息):
  - 内容: watchEffect 的基本使用。
  - 活动: 阅读官方文档关于 watchEffect 的内容。理解 watchEffect 会立即执行一次，并且自动追踪回调函数中使用的所有响应式依赖，当其中任何一个改变时重新运行回调。
  - 实践: 在 <script setup> 中导入 watchEffect。创建一个 watchEffect(() => { console.log('User age is now:', user.age); console.log('Message is:', message.value); }); 观察它如何自动追踪 user.age 和 message.value 的变化。
  - 休息: 短暂休息。
- 番茄时钟 4 (25 分钟工作 + 5 分钟休息):
  - 内容: watch vs watchEffect 与副作用清除。
  - 活动: 对比 watch 和 watchEffect 的区别（明确指定依赖 vs 自动追踪依赖；惰性执行 vs 立即执行）。理解它们都用于执行“副作用”（如数据获取、DOM 操作、设置定时器）。学习如何在侦听器回调中返回一个清除函数，用于清理副作用（例如清除定时器、取消进行中的异步请求）。
  - 思考: 在什么场景下更适合用 watch？什么场景下更适合用 watchEffect？
  - 实践: 创建一个简单的异步操作（如 setTimeout），在 watch 或 watchEffect 回调中调用它，并返回一个清除函数来取消它。
  - 休息: 短短休息。
- 总结与实践 (10-15 分钟):
  - 回顾 watch 和 watchEffect 的用法、区别以及副作用清除。
  - 思考实际应用中侦听器的场景（例如：根据用户 ID 变化重新加载数据、根据输入框内容实时搜索）。
  - 尝试在你的实践项目中实现一个需要侦听器功能的例子。

掌握检查:

在 Day 32 结束时，你应该能够：
- 在组件中使用 <script setup>。
- 使用 ref 和 reactive 创建不同类型的响应式数据。
- 理解 ref.value 的作用以及在模板中的自动解包。
- 知道 toRefs 何时需要使用（解构 reactive 对象）。
- 理解 readonly 的作用。
- 对 Vue 3 响应式基于 Proxy 的原理有一个基本概念。
- 使用 computed 创建派生状态，并理解其缓存特性。
- 使用 watch 侦听特定数据源的变化，并使用常用选项（immediate, deep）。
- 使用 watchEffect 实现自动追踪依赖的副作用。
- 理解 watch 和 watchEffect 的主要区别和适用场景。