Vue百日学习计划Day43-45天详细计划-Gemini版

Day 43: Composable 函数基础与抽取简单逻辑 (~3 小时)

• 本日目标: 理解 Composable 函数的概念、优势，并学会如何将简单的、无状态的逻辑抽取为 Composable。
• 所需资源: Vue 3 官方文档 (组合式函数): https://cn.vuejs.org/guide/reusability/composables.html

学习计划:

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

  • 内容: Composable 函数的引入与优势。
  • 活动: 阅读官方文档中关于“组合式函数”的介绍。理解 Composable 函数是为了解决在 Composition API 中复用带状态逻辑的问题。对比它与 Mixin、Renderless Components 等传统复用方式的优缺点。
  • 思考: Composable 如何提升代码组织性、可读性以及类型推断能力？
  • 休息: 短暂休息。

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

  • 内容: Composable 函数的基本结构。
  • 活动: 学习 Composable 函数的约定：通常以 use 开头命名（如 useMouse），是普通的 JavaScript 函数，接受参数并返回状态和方法。
  • 实践: 在你的 Vue 项目中创建一个 src/composables 目录。在其中创建一个 useCounter.js 文件，定义一个简单的函数，不包含任何响应式状态，例如 export function useGreeting(name) { return Hello, ${name}; }。
  • 休息: 快速调整状态。

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

  • 内容: 在组件中使用 Composable 函数。
  • 活动: 学习如何在组件的 <script setup> 中导入并调用 Composable 函数。
  • 实践: 在你的 App.vue 或其他组件中，导入并调用 useGreeting。在模板中显示其返回值。
  • 休息: 短暂放松。

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

  • 内容: 抽取简单的带状态逻辑 (以 ref 为例)。
  • 活动: 阅读官方文档中关于“约定与最佳实践”的部分，特别是关于在 Composable 中使用响应式 API 的部分。理解 Composable 的核心是能够封装响应式状态。
  • 实践: 修改 useCounter.js，使其包含响应式状态。例如：export function useCounter(initialValue = 0) { const count = ref(initialValue); const increment = () => count.value++; return { count, increment }; }
  • 休息: 补充水分。

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

  • 回顾 Composable 函数的基本概念和 use 命名约定。
  • 确认你理解了 Composable 函数如何封装并导出响应式状态。
  • 确保你在组件中成功使用了包含响应式状态的 Composable。

---

Day 44: Composable 函数 - 生命周期与侦听器集成 (~3 小时)

• 本日目标: 学习如何在 Composable 函数中集成生命周期钩子和侦听器，以封装更复杂的带状态逻辑。
• 所需资源: Vue 3 官方文档 (组合式函数): https://cn.vuejs.org/guide/reusability/composables.html

学习计划:

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

  • 内容: Composable 中使用生命周期钩子。
  • 活动: 理解 Composable 函数可以在 setup 期间被调用，因此可以在 Composable 内部直接使用 onMounted, onUnmounted 等生命周期钩子。这些钩子会注册到调用该 Composable 的组件实例上。
  • 实践: 修改 useCounter.js (或创建一个新的 useLogger.js)，在其中添加 onMounted(() => console.log('Composable mounted')) 和 onUnmounted(() => console.log('Composable unmounted'))。
  • 休息: 短暂休息。

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

  • 内容: 结合生命周期钩子实现实际功能。
  • 活动: 思考一个常见的场景：鼠标位置追踪。它需要 onMounted 来添加事件监听器，并在 onUnmounted 中移除事件监听器以防止内存泄漏。
  • 实践: 创建 useMouse.js：

    import { ref, onMounted, onUnmounted } from 'vue';
    export function useMouse() {const x = ref(0);const y = ref(0);function update(event) {x.value = event.pageX;y.value = event.pageY;}onMounted(() => window.addEventListener('mousemove', update));onUnmounted(() => window.removeEventListener('mousemove', update));return { x, y };
    }
    

  • 休息: 快速调整状态。

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

  • 内容: 在 Composable 中使用侦听器 (watch, watchEffect)。
  • 活动: 理解 Composable 函数也可以包含 watch 和 watchEffect 来侦听其内部或外部传入的响应式状态变化。这使得 Composable 能够封装带有副作用的逻辑。
  • 实践: 在 useMouse.js 中添加一个 watchEffect(() => { console.log(Mouse position: ${x.value}, ${y.value}); }); 观察其效果。
  • 休息: 短暂放松。

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

  • 内容: 封装异步数据获取逻辑。
  • 活动: 这是一个非常常见的 Composable 应用场景。结合 ref (用于数据、加载状态、错误) 和 onMounted (用于触发请求)。
  • 实践: 创建 useFetch.js：

    import { ref, onMounted } from 'vue';
    export function useFetch(url) {const data = ref(null);const error = ref(null);const loading = ref(true);onMounted(async () => {try {const res = await fetch(url);data.value = await res.json();} catch (err) {error.value = err;} finally {loading.value = false;}});return { data, error, loading };
    }
    

  • 休息: 补充能量。

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

  • 回顾如何在 Composable 中使用生命周期钩子 (onMounted, onUnmounted) 和侦听器 (watch, watchEffect)。
  • 巩固如何通过 Composable 封装带有副作用的逻辑，例如事件监听和数据获取。
  • 确保 useMouse 和 useFetch Composable 能够在组件中正常工作。

---

Day 45: Composable 函数 - 高级用法与最佳实践 (~3 小时)

• 本日目标: 掌握 Composable 的高级用法，如接受参数、处理响应式参数，并理解使用 Composable 的最佳实践。
• 所需资源: Vue 3 官方文档 (组合式函数): https://cn.vuejs.org/guide/reusability/composables.html

学习计划:

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

  • 内容: Composable 接受参数。
  • 活动: 理解 Composable 作为普通 JavaScript 函数，可以接受任意数量和类型的参数。这使得它们更具通用性。
  • 实践: 修改 useFetch.js，使其接受一个 options 对象作为第二个参数，用于配置 Workspace 请求（例如 method, headers, body）。
  • 休息: 短暂休息。

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

  • 内容: 处理 Composable 的响应式参数。
  • 活动: 学习如何处理传入 Composable 的响应式参数。如果传入的参数是响应式的（ref 或 reactive），并且 Composable 内部的逻辑需要响应这些参数的变化，就需要使用 watch 或 toRefs 来响应。
  • 实践: 修改 useFetch.js，使其 url 参数也变为响应式的。例如，useFetch(url: Ref<string>)，并在内部使用 watch(url, fetchData) 来在 url 变化时重新发起请求。
  • 休息: 快速调整状态。

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

  • 内容: Composables 之间的组合。
  • 活动: 理解 Composable 函数之间可以互相调用和组合，形成更复杂的逻辑。这大大提高了代码的模块化和可维护性。
  • 实践: 创建一个 usePaginatedFetch.js，它内部调用 useFetch，并添加分页相关的逻辑（如 currentPage，itemsPerPage，paginatedData）。
  • 休息: 短暂放松。

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

  • 内容: Composable 的最佳实践与命名约定。
  • 活动: 回顾官方文档中关于 Composable 最佳实践的部分：use 命名约定、返回一个对象（而不是数组）、避免在 Composable 内部执行 DOM 操作（除非封装了通用行为）、注意副作用的清理。
  • 思考: 为什么 Composable 内部的 DOM 操作应谨慎？为什么推荐返回一个对象？
  • 休息: 补充能量。

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

  • 回顾 Composable 函数接受响应式参数并进行响应的方法。
  • 巩固 Composable 之间相互组合的能力。
  • 讨论 Composable 的最佳实践，确保你的代码符合规范。
  • 尝试将你项目中的某个复杂组件中的一部分逻辑抽取为 Composable。

---

掌握检查:

• 在 Day 45 结束时，你应该能够：
  • 清晰理解 Composable 函数的定义、优势和 use 命名约定。
  • 能够将简单的响应式状态和逻辑（如计数器）封装成 Composable。
  • 能够在 Composable 中使用 onMounted, onUnmounted 等生命周期钩子来管理副作用。
  • 能够在 Composable 中使用 watch 或 watchEffect 来响应内部或外部的响应式数据变化。
  • 能够封装异步数据获取等带有复杂副作用的逻辑。
  • 理解 Composable 如何接受参数，并能处理响应式参数。
  • 理解 Composable 之间如何相互组合以构建更复杂的逻辑。
  • 了解 Composable 的最佳实践，如返回对象、副作用清理等。