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 的最佳实践，如返回对象、副作用清理等。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.pswp.cn/news/906581.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C++：list容器，deque容器

C++：list容器，deque容器

list容器&#xff1a;双向链表容器&#xff0c;底层是双向链表。 简单使用如下&#xff1a; #include<iostream> #include<list> using namespace std;int main() {list<int> lst;lst.push_back(1);lst.push_back(2);lst.push_back(3);lst.push_front(4);l…
阅读更多...
STM32之温湿度传感器(DHT11)

STM32之温湿度传感器(DHT11)

KEIL软件实现printf格式化输出 一般在标准C库是提供了格式化输出和格式化输入等函数&#xff0c;用户想要使用该接口&#xff0c;则需要包含头文件 #include &#xff0c;由于printf函数以及scanf函数是向标准输出以及标准输入中进行输出与输入&#xff0c;标准输出一般指的是…
阅读更多...
【苍穹外卖】Day01—Mac前端环境搭建

【苍穹外卖】Day01—Mac前端环境搭建

目录 一、安装Nginx &#xff08;一&#xff09;安装Homebrew &#xff08;二&#xff09;Homebrew安装Nginx 1. 执行安装命令&#xff1a; 2. 验证安装&#xff1a; &#xff08;三&#xff09;启动与停止Nginx 二、配置Nginx 1. 替换nginx.conf 2. 替换html文件夹 三…
阅读更多...
docker面试题（3）

docker面试题（3）

如何临时退出一个正在交互的容器的终端&#xff0c;而不终止它 按ctrlp&#xff0c;后按ctrlq &#xff0c;如果按ctrlc会使容器内的应用进程终止&#xff0c;进而会使容器终止 很多应用容器都默认是后台运行的&#xff0c;怎么查看它们输出的日志信息 使用docker logs &#…
阅读更多...
单片机设计_四轴飞行器（STM32）

单片机设计_四轴飞行器（STM32）

四轴飞行器&#xff08;STM32&#xff09; 想要更多项目私wo!!! 一、系统简介 四轴飞行器是一种通过四个旋翼产生的升力实现飞行的无人机&#xff0c;其核心控制原理基于欧拉角动力学模型。四轴飞行器通过改变四个电机的转速来实现六自由度控制&#xff08;前后、左右、上下…
阅读更多...
Vue 3 与 Vue 2 的区别详解

Vue 3 与 Vue 2 的区别详解

Vue 3 在性能、语法、响应式、类型系统等方面相比 Vue 2 做了大幅优化和改进。本篇将从多个维度详细对比 Vue 3 与 Vue 2 的核心区别。 &#x1f4cc; 核心对比表格 对比维度Vue 2Vue 3说明核心 API 模式Options APIComposition API&#xff08;兼容 Options&#xff09;Vue 3…
阅读更多...
深入理解 Redisson 看门狗机制：保障分布式锁自动续期

深入理解 Redisson 看门狗机制：保障分布式锁自动续期

在分布式系统的开发中&#xff0c;分布式锁是解决资源竞争、数据一致性问题的关键手段。Redisson 作为一个在 Java 领域广泛使用的 Redis 客户端框架&#xff0c;为我们提供了功能强大且易用的分布式锁实现。其中&#xff0c;看门狗&#xff08;watchDog&#xff09;机制更是 R…
阅读更多...
配置gem5环境：Dockerfile使用

配置gem5环境：Dockerfile使用

下载ZIP文件 到dockerfile所在目录下&#xff1a; 运行以下命令 注意不要忘记最后的标点 . docker build -t gem5bootcamp .在 Dockerfile 所在目录下执行 docker build 时&#xff0c;Docker 会按照 Dockerfile 中的指令&#xff0c;自动下载和构建所需的一切。不过这过程里…
阅读更多...
角度回归——八参数检测四边形Gliding Vertex

角度回归——八参数检测四边形Gliding Vertex

文章目录 一、介绍&#xff08;一&#xff09;五参数检测方法&#xff08; 基于角度&#xff09;&#xff08;二&#xff09;八参数检测方法&#xff08;point-based&#xff09;的边界 二、方案分析&#xff08;一&#xff09;问题定义&#xff08;二&#xff09;方案&#xf…
阅读更多...
鸿蒙系统电脑：开启智能办公新时代

鸿蒙系统电脑：开启智能办公新时代

鸿蒙系统电脑&#xff1a;开启智能办公新时代 引言 2025 年 5 月 8 日&#xff0c;华为正式推出了鸿蒙系统电脑&#xff0c;这款具有里程碑意义的产品&#xff0c;不仅彰显了华为在智能设备领域的创新实力&#xff0c;也为用户带来了全新的智能办公体验。在数字化转型加速的背…
阅读更多...
计量单片机 RN8302：特性、使用与应用

计量单片机 RN8302：特性、使用与应用

在现代电力监测与能源管理领域&#xff0c;精确的电能计量至关重要。计量单片机 RN8302 作为一款高性能的电能计量芯片&#xff0c;凭借其卓越的特性与功能&#xff0c;在众多应用场景中发挥着关键作用。本文将全面深入地介绍 RN8302 的各项特性、使用方法、注意事项以及广泛的…
阅读更多...
Flink 的窗口机制

Flink 的窗口机制

&#x1fa9f; 1. 基于时间驱动的滚动时间窗口&#xff08;Tumbling Time Window - Time-based&#xff09; ✅ 定义&#xff1a; 每隔固定的时间周期开启一个新的窗口。窗口之间不重叠。 &#x1f552; 示例&#xff1a; DataStream<Tuple2<String, Integer>>…
阅读更多...
【RA-Eco-RA2L1-48PIN】ADC 电压表与OLED显示

【RA-Eco-RA2L1-48PIN】ADC 电压表与OLED显示

【RA-Eco-RA2L1-48PIN】ADC 电压表与OLED显示 本文介绍了 RA-Eco-RA2L1-48PIN 开发板通过瑞萨 e2 Studio 灵活软件包&#xff08;FSP&#xff09;编程实现 ADC 串口采集电压和OLED显示电压数值的项目设计&#xff0c;包括串口电压值串口打印、硬件 IIC 通信协议配置、 OLED显示…
阅读更多...
GraphQL在.NET 8中的全面实践指南

GraphQL在.NET 8中的全面实践指南

一、GraphQL与.NET 8概述 GraphQL是一种由Facebook开发的API查询语言&#xff0c;它提供了一种更高效、更灵活的替代REST的方案。与REST不同&#xff0c;GraphQL允许客户端精确指定需要的数据结构和字段&#xff0c;避免了"过度获取"或"不足获取"的问题。…
阅读更多...
Elasticsearch 写入性能优化有哪些常见手段？

Elasticsearch 写入性能优化有哪些常见手段？

Elasticsearch 写入性能优化常见手段主要有以下 10 个方向&#xff0c;建议根据具体业务场景组合使用&#xff1a; 批量写入优化 使用_bulk API 批量提交文档建议每批次 5-15MB 数据量并发执行多个批量请求 索引配置调优 PUT /my_index {"settings": {"inde…
阅读更多...
【图像大模型】基于深度对抗网络的图像超分辨率重建技术ESRGAN深度解析

【图像大模型】基于深度对抗网络的图像超分辨率重建技术ESRGAN深度解析

基于深度对抗网络的图像超分辨率重建技术ESRGAN深度解析 一、技术背景与核心创新1.1 图像超分辨率技术演进1.2 核心技术创新对比 二、算法原理深度解析2.1 网络架构设计2.1.1 RRDB模块结构 2.2 损失函数设计2.2.1 对抗损失&#xff08;Adversarial Loss&#xff09;2.2.2 感知损…
阅读更多...
第八天 搭建车辆状态监控平台（Docker+Kubernetes） OTA升级服务开发（差分升级、回滚机制）

第八天 搭建车辆状态监控平台（Docker+Kubernetes） OTA升级服务开发（差分升级、回滚机制）

前言 在智能网联汽车快速发展的今天&#xff0c;车辆状态监控和OTA&#xff08;Over-The-Air&#xff09;升级已成为智能汽车的核心能力。本文将手把手带你从零开始搭建基于云原生技术的车辆状态监控平台&#xff0c;并开发完整的OTA升级服务系统。无论你是刚接触容器技术的开…
阅读更多...
五分钟学会如何封装Jsckson工具类

五分钟学会如何封装Jsckson工具类

前言&#xff1a;在 Java 开发中&#xff0c;JSON 是一种非常常见的数据格式&#xff0c;而 Jackson 是处理 JSON 的主流库之一&#xff0c;为了提高代码的复用性、可维护性&#xff0c;我们通常会将 Jackson 的操作封装成一个工具类&#xff0c;简化使用。 ✨✨✨这里是秋刀鱼…
阅读更多...
InternLM 论文分类微调实践（XTuner 版）

InternLM 论文分类微调实践（XTuner 版）

1.环境安装 我创建开发机选择镜像为Cuda12.2-conda&#xff0c;选择GPU为100%A100的资源配置 Conda 管理环境 conda create -n xtuner_101 python3.10 -y conda activate xtuner_101 pip install torch2.4.0cu121 torchvision torchaudio --extra-index-url https://downloa…
阅读更多...
软考中级软件设计师——设计模式篇

软考中级软件设计师——设计模式篇

一、设计模式核心分类 设计模式分为 3 大类&#xff0c;共 23 种模式&#xff08;考试常考约 10-15 种&#xff09;&#xff1a; 分类核心模式考试重点创建型模式工厂方法、抽象工厂、单例、生成器、原型单例模式的实现&#xff08;懒汉、饿汉&#xff09;、工厂模式的应用场…
阅读更多...
最新文章

Copyright @ 2022~2023