- 博客(15)
- 收藏
- 关注
RSS订阅原创 Vuejs的设计与实现 第一章内容笔记
本文探讨了前端开发中性能优化的核心问题。首先比较了命令式与声明式编程的差异，指出声明式代码虽有一定性能损耗但维护性更优。其次分析了虚拟DOM与innerHTML的性能对比，强调虚拟DOM在更新时的性能优势。最后讨论了运行时、编译时及混合模式的框架设计思路，说明Vue3采用运行时+编译时架构在灵活性与性能间的平衡。文章指出，框架选择需综合考虑心智负担、可维护性和性能等多方面因素，虚拟DOM是一个相对理想的解决方案。
2025-12-03 11:30:00
775
原创 一篇文章带你读懂什么是 HTTP / TCP
HTTP协议是Web数据交换的基础，采用客户端-服务器模式，通过请求-响应机制实现无状态通信。HTTP/1.1存在性能瓶颈，如应用层队头阻塞和头部冗余。HTTP/2通过二进制协议、多路复用和头部压缩解决了这些问题。底层TCP协议提供可靠传输，但存在三次握手、拥塞控制和队头阻塞等问题。理解这些协议层次有助于优化网络通信性能。
2025-10-09 13:59:36
922
原创 一篇文章带你读懂什么是流式响应
本文对比了Fetch与XMLHttpRequest在流式数据处理上的差异，重点介绍了Fetch API配合ReadableStream实现流式响应的机制。Fetch返回的Response对象包含ReadableStream，通过getReader()创建读取器，使用read()方法分段处理数据，实现实时渲染。文章详细解析了ReadableStream的控制器、读取器等核心概念和工作原理，包括数据流锁定、分块读取等关键特性，为处理大数据量场景提供了高效解决方案。
2025-09-24 17:06:17
740
原创 一篇文章带你搞懂 ArrayBuffer Blob Fliles和 FormData
摘要 文章梳理了前端文件上传过程中涉及的主要数据类型及其转换关系。首先说明通过input获取的是File对象，而上传时需要包装为FormData。详细解析了File、Blob和FormData三种关键类型：File继承自Blob，包含文件名等属性；Blob提供arrayBuffer()等方法转换数据；FormData用于构建multipart/form-data格式的请求体。文章还给出了查看FormData内容的实用方法，帮助开发者理解文件上传流程中的数据类型转换机制。
2025-09-18 13:34:59
1023
原创 前端并发请求 添加请求失败后重试功能
这篇文章介绍了一个改进后的并发请求实现方案，主要新增了请求失败自动重试功能。作者将fetch请求封装成attemptRequest函数，通过递归调用支持重试机制，并显式返回每次重试的结果。实现包含三个关键点：1) 从配置解构请求参数；2) 使用try-catch处理请求结果；3) 根据剩余重试次数决定是否递归。最后将封装好的请求函数应用到原有并发控制逻辑中，通过工作者函数并行处理请求队列。代码还添加了类型定义和参数校验，并提供了带meta信息的调试示例。
2025-09-15 10:19:11
172
原创 前端并发请求
本文介绍了前端开发中实现并发请求的方法，通过逐步优化基础循环请求函数，最终使用Promise.all()实现高效并发。文章首先分析了顺序请求的不足，然后详细讲解了如何通过Promise.all()和async/await组合实现并发控制，包括处理索引同步问题和边界条件判断。关键点在于使用多个异步任务共享任务索引，保证并发执行时不冲突。该方法适用于需要快速加载大量资源的场景，能显著提升用户体验。
2025-09-12 10:36:05
747
原创 自定义封装组件 向外暴露类型版
摘要 本文详细介绍了如何对Vue组件进行二次封装，以ElInput组件为例，展示了保留原组件功能的同时添加自定义属性的完整流程。关键步骤包括：1)使用h()函数渲染组件并接收父组件传递的属性、事件和插槽；2)通过ref回调合并原组件实例和自定义属性；3)使用defineExpose()暴露合并后的属性和方法；4)使用TypeScript类型声明保证类型安全。文章还讲解了相关API如h()、$attrs、$slots和defineExpose()的使用方法，为组件二次封装提供了完整的技术方案。
2025-09-10 14:48:50
614
原创 自定义封装 Element Plus 的 Form 组件
本文介绍了一个基于Element Plus的Form表单二次封装方案。通过动态组件和配置项方式，实现了表单的自动渲染、验证规则配置、联动控制等功能。父组件只需定义FormAttributes和FormItems数组，子组件通过component: is动态渲染各表单元素，并暴露验证和重置方法。该封装支持组件隐藏、属性透传、数据双向绑定等特性，同时推荐将数据管理交给父组件，子组件仅处理交互逻辑。这种面向对象的封装方式既提高了开发效率，又保证了代码的可维护性。
2025-09-07 14:02:01
398
原创 在 nuxt4 项目里使用 i18n
Nuxt4项目集成i18n国际化指南 本文介绍了在Nuxt4项目中正确配置i18n国际化的步骤。关键点包括：1)必须查看官方文档而非依赖AI工具；2)安装@nuxtjs/i18n@10.0.3版本；3)在nuxt.config.ts中配置默认语言和语言选项；4)必须在根目录下创建locales文件夹存放语言文件；5)避免使用绝对路径指定目录。特别提醒，Nuxt4的中文文档较少，建议直接参考i18n.nuxtjs.org官方文档以避免配置错误。
2025-09-07 10:45:19
569
原创 Markdown 语法概览
《Markdown 语法概览》介绍了基础Markdown语法规则：标题用1-6个#或下划线标注，段落换行需两空格；支持加粗、斜体等文本样式；块引用以>开头，支持嵌套；有序列表自动编号，缩进创建子项；可用---等创建分割线。还包含链接、表格对齐、任务列表、删除线等进阶用法，并详细说明了YAML Front Matter的字段配置。文章提供了完整的Markdown写作指南，适合快速查阅语法要点。（149字）
2025-08-13 16:33:19
242
原创 动态路由——自动将指定目录下的文件注册为路由
本文介绍了如何利用Vite的import.meta.globAPI实现Vue3项目的自动路由注册功能。通过解析pages目录下的.vue文件，自动生成路由配置，支持动态路由、参数传递等功能。关键步骤包括：1)使用glob匹配文件；2)转换路径格式；3)处理index路由；4)配置路由对象；5)排序路由优先级并添加404重定向。最终输出一个类型安全的RouteRecordRaw数组，可无缝集成到Vue Router中。
2025-07-22 18:16:53
248
原创 纯前端动态配置官网展示信息
本文介绍了在Vue3项目中实现配置热更新的方案。通过将基础配置信息存放在public目录下的JSON文件中，使用fetch动态加载并添加时间戳防止缓存。该方法避免了频繁打包部署，实现了配置的即时更新。文章详细说明了实现步骤：创建JSON配置、编写加载方法、初始化调用及组件使用方式，并提供了测试建议。该方案适用于需要频繁修改展示信息的官网项目，解决了传统方式导致的停服、资源浪费和维护不便等问题，同时保持了配置修改的即时性和便捷性。
2025-07-17 10:12:32
319
原创 组件的二次封装
本文介绍了在Vue3项目中如何正确进行组件二次封装，重点解决三个核心问题：属性穿透、插槽接收和组件方法暴露。通过使用component、h()和getCurrentInstance()等API，作者展示了两种实现方法：一是直接修改exposeProxy（简单但可能破坏响应式），二是使用defineExpose规范暴露（更推荐）。文章提供了完整的父组件和子组件代码示例，详细说明了如何在二次封装Element Plus的ElInput组件时，保留原组件所有功能的同时添加自定义内容。
2025-07-09 11:00:37
476
原创 定义供复用的函数式组件
本文介绍了Vue3中两种封装自定义组件的方式。第一种通过props/emit/attrs等API实现基础组件封装，但存在复用性不足的问题。第二种提出函数式组件方案，通过createReusableTemplate创建可复用模板，包含DefineTemplate定义模板和UseTemplate使用模板两部分，解决了组件复用问题，并支持动态参数传递。文章对比了两种实现方式的差异，指出函数式组件在渲染逻辑上的优势，同时也提到目前方案尚不能支持插槽传递的不足。技术栈包含Vue3、TypeScript和Element
2025-07-02 13:24:00
385
原创 vue3 + typescript 封装符号点击 人机验证组件
本文介绍了三种Vue3前端人机验证方案的技术实现。项目基于Vue3.5、TypeScript5.6和ElementPlus开发，具体方案包括：1）Google reCAPTCHA v2验证，但国内加载较慢；2）vue3-captcha数字验证，简洁但界面简陋；3）自定义符号点击验证组件，使用defineModel实现父子通信，支持自定义样式和符号。三种方案各具特色，开发者可根据需求选择，文章详细对比了各方案的API参数、优缺点并提供了组件代码示例。最终推荐的自定义组件方案兼顾了美观性和灵活性。
2025-07-01 16:42:38
952
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人