- 博客(108)
- 收藏
- 关注
RSS订阅原创 你可能忽略的 TypeScript 类型兼容性与类型推导原理
本文深入解析TypeScript的类型兼容性与类型推导原理。类型兼容遵循结构性类型系统，只要结构匹配即可赋值，解释了基本类型、对象、函数、类与枚举之间的兼容规则。类型推导部分详述变量初始化、字面量类型、函数返回值及泛型推导机制，并指出常见陷阱如对象字面量严格检查、any滥用和推导过宽等问题。理解这些原理有助于编写更健壮的TypeScript代码，避免类型安全隐患。掌握类型兼容与推导是进阶TypeScript开发的关键。
2025-07-16 00:15:00
713
原创 5 个复杂泛型的拆解思路，教你从看不懂到写得出！
这篇文章总结了5个TypeScript复杂泛型的拆解思路，帮助开发者从看不懂到能写出高级泛型。核心方法是通过5步分析法：识别泛型参数、条件判断、推断结构、映射类型和递归调用。文章详细拆解了DeepPartial（递归可选对象）、Flatten（提取数组元素类型）、PickByType（筛选属性）、UnionToIntersection（联合转交叉）和IsAny（判断any类型）等典型案例，揭示了每种泛型的技术要点和实现套路。掌握这些模式后，开发者不仅能理解源码中的复杂泛型，还能自己设计高级类型工具。
2025-07-16 00:15:00
652
原创 JS 算法时间复杂度速查表 + 实战练习题
《JS算法时间复杂度速查表与实战练习》提供了常见算法时间复杂度的速查表，包括O(1)、O(log n)、O(n)、O(n²)等不同复杂度对应的典型操作和算法。文章通过5个典型代码示例（获取最大值、判断重复、二分查找、冒泡排序和快速排序）详细分析时间复杂度，并给出优化建议。最后推荐了8个难度递增的练习题，涵盖数组处理、查找和排序等常见场景，帮助开发者理解算法效率差异，掌握优化技巧。强调利用Set/Map等数据结构可将O(n²)优化为O(n)，而二分法等O(log n)算法能显著提升性能。
2025-07-15 01:00:00
256
原创 说说 this 的指向问题，举例讲透！
本文深入解析JavaScript中this的5种绑定方式：默认绑定（指向全局对象或undefined）、隐式绑定（指向调用对象）、显式绑定（通过call/apply/bind强制绑定）、new绑定（指向新创建对象）和箭头函数（继承外层作用域this）。重点分析了常见应用场景如对象方法、定时器、事件监听中的this指向问题，并提供了4步判断法则：先看new、显式绑定、隐式绑定，最后默认绑定。文章强调this是执行时而非定义时决定的特性，帮助开发者彻底掌握这一关键概念。
2025-07-15 01:00:00
599
原创 JavaScript 中 `this`、`bind` 与箭头函数调用过程详解
《JavaScript中this、bind与箭头函数调用过程解析》一文深入探讨了this指向的核心机制。文章指出this值取决于调用方式而非定义位置，通过典型场景演示了this丢失问题（如直接赋值方法导致undefined）。对比三种解决方案：直接调用（obj.say()）、bind强制绑定（obj.say.bind(obj)）和箭头函数闭包调用（()=>obj.say()），揭示其本质差异——bind显式绑定this，箭头函数通过闭包规避this问题。重点强调：避免直接赋值方法，推荐根据场景选择bi
2025-07-15 01:00:00
729
原创 Monorepo 由浅入深全解析
本文全面解析了Monorepo技术，从概念、优势挑战到工具选型和实战搭建。Monorepo将多个模块集中管理在一个仓库中，具有统一依赖管理、高效协作和模块复用等优势，但也面临依赖混乱、构建速度等挑战。文章对比了Lerna、Turborepo、Nx等主流工具，推荐pnpm+Turborepo/Nx组合。并手把手演示了基于pnpm+Turborepo的Monorepo项目搭建流程，包括工作区配置、子包创建和Turbo构建优化。最后指出Monorepo适合大型协作项目，是现代前端开发的必备技能。
2025-07-14 07:00:00
739
原创 常见时间复杂度实战案例对比
本文通过实战案例对比常见算法时间复杂度，帮助快速判断性能表现。O(1)如数组首元素访问（执行次数固定），O(n)如遍历数组（数据量与执行次数成正比），O(n²)如暴力查重（双重循环耗时剧增），O(log n)如二分查找（效率惊人），O(n log n)如快速排序（优于O(n²)）。文中提供对比表格和记忆口诀，直观展示不同时间复杂度在n=1000时的性能差异：O(1)仅1次操作，O(n²)可达百万次。掌握这些特性可有效评估算法效率。
2025-07-14 01:00:00
434
原创 ECharts 图表 + 大屏适配实战案例
本文介绍了ECharts图表在大屏项目中的适配方案，主要解决缩放模糊、自适应等问题。推荐使用transform:scale+resize重绘图表的方式，并提供了Vue3+Vite的完整实现步骤：1)封装useEchart工具函数处理图表初始化和响应式；2)开发可复用的EchartCard组件；3)页面集成示例。文章还包含高级技巧如字体自适应、防抖优化等，最后总结了常见问题的推荐做法，帮助开发者实现高质量的大屏数据可视化效果。
2025-07-13 07:00:00
182
原创 JavaScript 运算符大全（含示例）
本文全面整理了JavaScript中常用的运算符，涵盖算术、赋值、比较、逻辑、位运算等12大类。重点介绍了各运算符的使用场景及示例代码，如+加法、===严格相等、??空值合并等。特别对比了||和??的区别，强调===比==更安全，并推荐了解构赋值、扩展运算符等实用技巧。文章还包含类型判断、三元运算符等高级用法，最后总结了运算符的最佳实践组合，如用??设置默认值。适合开发者快速查阅JS运算符知识。
2025-07-13 07:00:00
761
原创 Vue 3 中 `ref` vs `shallowRef` 实战指南
Vue 3 中 ref 与 shallowRef 实战解析： ref 提供深度响应式，适合表单、可编辑表格等需要监听内部属性变化的场景；shallowRef 仅响应 .value 整体替换，性能更优，推荐用于大表格数据、API返回结果、缓存及第三方实例。核心选择标准：是否需监听对象内部变化？要深度监听选 ref，只需整体替换用 shallowRef，合理选择可显著提升性能。表单编辑用 ref，只读数据/图表实例用 shallowRef。
2025-07-12 07:00:00
576
原创 10 个你应该自己封装的自定义 Vue Hook，让项目更可维护
摘要：本文介绍了10个值得封装的Vue自定义Hook，帮助提升项目可维护性。这些Hook包括表单校验、权限管理、请求封装、分页处理、弹窗控制等常见场景。通过封装逻辑复用代码，实现组件解耦、状态统一管理。每个Hook都配有简洁示例，涵盖Element Plus/Naive UI表单、暗黑模式切换、URL参数处理等实用功能。自定义Hook能有效解决代码重复问题，是构建结构化Vue应用的关键实践。文章还预告了下期将分享通用工具函数封装技巧。
2025-07-12 06:30:00
831
原创 10 个你项目里可能漏掉的 TypeScript 技巧
这篇TypeScript技巧文章分享了10个容易被忽略但非常实用的开发技巧，包括：使用联合类型替代硬编码常量、as const固定字面量类型、keyof typeof构造安全键名、自动推断默认参数类型、infer提取子类型、ReturnType推导函数返回类型、Record构建映射对象、类型守卫处理unknown、satisfies约束对象结构以及readonly增强不可变性。这些技巧能显著提升代码的类型安全性、可读性和工程效率，特别适合中大型项目开发。最后还推荐了类型调试工具ts-toolbelt，并附上
2025-07-11 11:17:07
581
原创 TypeScript 中的内置工具类型（Utility Type）
Utility Type 是TypeScript 提供的内置泛型类型，用于在已有类型的基础上快速创建新类型。💡 类似于 JavaScript 的工具函数（如map()filter()），这些类型是对类型的“加工”操作。类型作用Partial所有字段变为可选Required所有字段变为必填Readonly所有字段只读PickOmit选择/排除字段ReturnType推导函数返回类型Parameters推导函数参数类型ExcludeExtract类型集合筛选去除 null/undefined。
2025-07-11 11:14:51
542
原创 一文搞懂 Vue Router 的钩子函数和实战用法！
📌 Vue Router导航守卫实战指南 本文系统讲解Vue Router三大类导航守卫（全局/路由独享/组件级）的核心用法： 🔥 全局守卫 beforeEach：登录/权限验证首选 afterEach：修改标题/结束Loading 🎯 路由独享 beforeEnter：针对单路由的权限控制 💡 组件级守卫 beforeRouteEnter：初始化数据（无this） beforeRouteUpdate：参数变化刷新数据 beforeRouteLeave：防表单丢失提醒 📊 实战场景对照表：针对登录
2025-07-10 10:01:45
1016
原创 教你如何用 localStorage+Vue 状态管理玩转数据持久化！
这篇文章介绍了如何结合使用 localStorage 和 Vue 状态管理工具（如 Pinia）来实现数据持久化。主要解决 Vue 项目刷新页面后状态丢失的问题，特别适合保存用户登录信息、主题设置等全局数据。文章通过 Pinia 示例演示了从 localStorage 初始化状态、同步更新数据的实现方法，并推荐了 VueUse 的 useStorage 工具简化操作。最后提供了进阶技巧，如封装存储方法、设置过期机制等，强调状态管理与本地存储结合既能保持响应式又能持久化数据，有效提升用户体验。文末还邀请读者互
2025-07-10 09:47:31
682
原创 Vue 3 中父子组件双向绑定的 4 种方式
本文总结了Vue 3中实现父子组件双向绑定的4种方式：1）使用v-model+modelValue+emit官方推荐方式；2）自定义v-model:xxx实现多值绑定；3）Vue 3.3+的defineModel简化写法；4）传统props+emit自定义字段方式。各方式适用于不同场景：表单组件推荐标准v-model，复合组件可用多model绑定，新项目建议使用defineModel，复杂交互适合自定义实现。文中提供了代码示例和场景对比表，帮助开发者根据需求选择合适的双向数据绑定方案。（148字）
2025-07-09 16:11:33
551
原创 Vue 3 + Element Plus 动态表单构建器组件实战教程
📌 Vue 3动态表单构建器组件开发指南 本文详细介绍了如何基于Vue 3和Element Plus构建一个功能强大的动态表单组件VFormBuilder。该组件主要特性包括： 1️⃣ 动态渲染：通过配置数据自动生成各种表单控件（输入框、选择器等） 2️⃣ 双向绑定：支持v-model绑定表单数据 3️⃣ 灵活验证：提供完整的表单验证功能 4️⃣ 自定义扩展：支持插槽替换和动态标签渲染 教程包含完整的组件源码解析，从基础结构定义到动态组件渲染的具体实现，并提供了典型使用示例和校验方法。最后还提出了远程数据
2025-07-09 15:57:04
536
原创 大屏适配实战方案详解（含源码）
本文详细介绍大屏适配的实战方案，推荐使用transform: scale()方法实现等比缩放，兼容不同分辨率屏幕。文章对比了4种适配方案优缺点，提供详细的HTML/CSS/Vue3代码实现，包括页面结构、样式设置和自适应JS脚本。开发建议包括使用固定尺寸设计稿、避免响应式布局等。测试表明该方法在主流分辨率下表现良好，并针对字体模糊、点击偏移等常见问题给出解决方案。最后对不同项目类型推荐适配方案，企业可视化大屏首选transform缩放方案。
2025-07-08 09:09:24
954
原创 移动端适配最佳实战方案详解
本文详细介绍了移动端适配的主流方案，包括rem+flexible、viewport+vw、媒体查询+px等，对比了各方案的优缺点。重点推荐了企业级最佳实践：rem+postcss-pxtorem方案，适用于Vue/uni-app项目，能够自动缩放适配不同设备。文章提供了完整的配置方法，包括postcss配置、动态设置rem基准值，以及Vite项目的集成方案。针对uni-app推荐使用内置upx单位，并解答了常见适配问题。根据项目场景，给出了适配方案选择建议，帮助开发者实现高效可靠的移动端适配。
2025-07-08 09:07:00
823
原创 unplugin-vue-components 最佳实践手册
《unplugin-vue-components 最佳实践手册》介绍了这款Vue组件自动导入插件的核心功能和配置方法。该插件能自动按需导入本地组件和UI库组件，无需手动import，有效减小包体积。文章详细讲解了安装步骤、Vite配置方法，包括目录扫描、类型声明生成、UI库解析器等关键功能，并推荐与unplugin-auto-import配合使用实现API和组件全自动导入。手册还提供了多目录支持、自定义扩展名等实用配置示例，以及常见问题解决方案，帮助开发者提升Vue3+Vite项目的开发效率。
2025-07-07 15:50:33
641
原创 unplugin-auto-import/vite 使用详解
📝 unplugin-auto-import/vite 是一款提升Vite开发效率的自动导入插件，能自动为Vue、Pinia、Vue Router等常用库生成import语句。通过简单配置即可实现： 1️⃣ 自动导入API（如ref/useRouter） 2️⃣ 支持TypeScript类型推导 3️⃣ 生成ESLint全局声明 4️⃣ 可在模板中直接使用函数 5️⃣ 支持自定义模块导入 配置只需在vite.config.ts中添加插件并指定需自动导入的库，开发时即可省去手动import的繁琐操作。该插件
2025-07-07 15:14:03
865
原创 Vue 3 中使用路由参数跳转时 watch 触发重复请求问题详解
《Vue 3 路由参数监听中的重复请求问题解决方案》摘要：在 Vue 3 项目中，通过 watch 监听路由参数（如 route.query.id）时，当页面跳转后仍会触发监听导致重复请求。本文提出在 watch 中加入页面判断（route.name !== '当前页面'）来阻止跨页误触发，并推荐封装为通用 Hook。解决方案核心在于：1) 仅当保持当前页面时才执行请求 2) 配合路由 name 进行精准判断 3) 提供可直接复用的代码模板。该方法有效解决详情页跳转订单页等场景下的性能浪费问题。
2025-07-06 08:00:00
283
原创 `useDetailLoader` 组合函数封装（支持自动加载 + 页面判断 + 防重复）
摘要：useDetailLoader是一个Vue组合函数，用于自动监听路由参数变化并加载详情数据。主要功能包括：自动监听query.id参数变化、仅在指定页面触发、避免重复加载、支持初始加载和浏览器返回场景。该函数提供loading状态管理和重新加载方法，可配置成功/失败回调，适用于各类详情页数据加载场景。通过封装通用逻辑，提升了代码复用性和可维护性，同时避免了跨页面误触发和重复加载问题。
2025-07-05 09:00:00
243
原创 DOM 中常见宽度属性详解与应用
这篇文章系统讲解了DOM中常见的宽度属性及其应用场景。主要内容包括：1) 通过示意图和表格对比了clientWidth、scrollWidth、offsetWidth和getBoundingClientRect().width的区别，指出它们各自包含的内容元素（如padding、滚动条等）；2) 提供了五个典型应用示例，包括判断文本溢出、检测滚动条、获取精确宽度、元素定位等；3) 给出了可直接运行的对比代码展示不同属性的返回值差异；4) 总结了各属性的适用场景，如clientWidth适合判断内容是否超出，
2025-07-05 00:15:00
429
原创 TextTipsPlus 多行省略 + Tooltip 提示组件
摘要：TextTipsPlus 是一款多功能文本展示组件，支持多行省略（1-4行）、动态宽度设置和溢出提示功能。核心特性包括：通过line-clamp控制显示行数，自动判断文本溢出并显示Tooltip，支持插槽插入复杂内容（图标/HTML），兼容i18n多语言。组件采用Vue3编写，提供响应式布局和窗口resize监听，适用于表格列、卡片等需要空间优化的场景。开发者可扩展Tooltip延迟显示、自定义样式等高级功能。典型使用场景包括长文本缩略显示、多语言内容展示和图文混排内容截断。
2025-07-04 10:27:51
118
原创 自定义时间范围选择组件使用教程（基于 Vue 3 + Element Plus）
本文介绍了一个基于Vue 3和Element Plus的自定义时间范围选择组件。该组件提供双向绑定的开始时间和结束时间选择，支持常用快捷选项（今天、昨天、本月、上月等），并带有国际化功能。组件核心功能包括：通过v-model绑定时间值、自动识别并高亮快捷选项、自定义插槽扩展以及样式优化。技术实现上使用了Element Plus的日期选择器和下拉选择器，并配合Vueuse的useVModel进行数据绑定，同时内置了多种日期处理方法。该组件可直接集成到表单中，提供美观实用的时间范围选择功能。
2025-07-04 10:17:40
377
原创 Vue 3 + Element Plus 常见开发问题与解决方案手册
📝 Vue 3 + Element Plus 开发问题解决手册 本文总结了Vue 3开发中的常见问题： 1️⃣ 动态插槽：<slot name="xxx">默认内容</slot>实现父组件传插槽则显示，未传则回退默认内容 2️⃣ h()函数：参数结构为(type, props?, children?)，支持组件/标签渲染 3️⃣ 响应式数据： unref()仅解包ref，toRaw()去除reactive的Proxy 推荐用cloneDeep深拷贝解除响应式 4
2025-07-03 16:11:01
495
原创 FileReader 文件读取与上传至后端 - Excel & PDF 示例
本文介绍了如何使用 FileReader 读取 Excel 和 PDF 文件并上传至后端的完整流程。通过前端代码示例演示了文件读取、解析（使用 xlsx 和 pdf.js 库）以及上传（使用 FormData 和 Fetch API）的实现方法，同时提供了 Node.js 后端处理文件上传的示例。文章还提出了文件大小限制、用户反馈和文件类型校验等优化建议，帮助开发者构建更完善的文件上传功能。
2025-07-03 08:00:00
398
原创 AI 大模型如何重塑软件开发流程？
摘要： AI大模型正在彻底重塑软件开发流程，从需求分析到编码、测试、文档编写和运维，全面提升效率。工具如Copilot、Cursor和ChatGPT能自动生成代码、测试用例、流程图甚至API文档，但也面临幻觉错误、版权风险和开发者依赖性等挑战。未来，AI与IDE的深度整合和自然语言编程将成为趋势。开发者需拥抱AI作为协同工具，而非替代者，以保持竞争力。AI不会取代开发者，但拒绝AI的开发者可能被时代淘汰。
2025-07-02 09:14:46
920
原创 Vuex 在实战项目中的使用详解（含真实案例）
本文详细介绍了Vuex在Vue.js项目中的实践应用，包括核心概念、项目结构组织、真实案例展示和最佳实践。首先分析了Vuex适用的五大场景，如跨组件状态共享和异步数据管理。重点演示了商城项目中用户模块的实现，涵盖state、getters、mutations和actions的完整配置。文章还介绍了组件中如何使用mapState/mapGetters映射状态，以及如何通过vuex-persistedstate实现状态持久化。最后总结了Vuex的最佳实践，强调模块化命名空间、异步/同步操作分离和状态管理规范等要
2025-07-02 09:04:56
446
原创 FileReader 是什么？干嘛用的？
FileReader 简介：前端文件读取工具 FileReader 是浏览器内置的类，用于在不发送到后端的情况下读取用户上传的文件（如文本、图片、PDF等）。通过 new FileReader() 创建实例，支持以文本、Base64、二进制等格式读取文件内容。常用方法包括 readAsText()、readAsDataURL()（用于图片预览）等，读取结果通过异步事件 onload 从 reader.result 获取。典型应用如本地图片预览、解析文件内容，提升用户体验。核心特点：无需页面刷新，纯前端处理文
2025-07-02 08:00:00
408
原创 Axios 请求取消机制完全教程（含重复请求处理）
📌 Axios请求取消机制全解析 本文详细讲解如何利用Axios的CancelToken实现重复请求自动取消，提升前端性能与用户体验。核心内容包括： 🔹 实现原理 通过CancelToken.source()生成token和cancel函数，利用Map存储请求唯一标识（method+url+params+data）与对应cancel函数 🔹 关键步骤 1️⃣ 请求拦截器中检查并取消重复请求 2️⃣ 响应拦截器清理已完成请求 3️⃣ 使用axios.isCancel()区分取消错误 🔹 最佳实践 ✔️
2025-07-01 10:31:18
1954
原创 Axios 二次封装高级教程（含请求取消等功能）
本文详细介绍了Axios二次封装的高级功能实现方案，包含以下核心内容： 总体架构设计：构建完善的HTTP请求封装层，包含请求拦截、响应拦截、请求取消、缓存策略等核心功能。 请求取消机制：通过cancelToken实现重复请求取消，防止接口抖动。 批量请求处理：使用axios.all和axios.spread实现多接口并行请求。 缓存策略：提供内存缓存实现，可扩展至本地存储。 失败重试：自动重试失败的请求，提高接口稳定性。 进度监听：支持文件上传/下载进度实时监控。 状态管理：结合Vue 3 Composit
2025-07-01 09:20:21
549
原创 uni-app 实现微信小程序全局页面分享功能教程
摘要： 本文介绍了如何在uni-app中通过app.mixin()全局配置微信小程序的页面分享功能，实现一次配置、全页面自动支持分享。核心方案包括： 在main.ts中注入onShareAppMessage和onShareTimeline逻辑，支持国际化标题和默认分享路径； 通过语言包动态配置多语言分享文案； 允许页面级自定义分享内容，并支持按钮触发分享； 进阶建议如动态生成分享路径。该方法简化了开发流程，兼顾灵活性与统一性，适用于需要全局分享的小程序项目。
2025-07-01 08:00:00
535
原创 Vue 3 响应式核心源码详解（基于 @vue/reactivity）
Vue 3 响应式系统核心源码解析：通过 @vue/reactivity 包实现响应式数据管理。主要包含 reactive（基于 Proxy 代理对象）、ref（通过 getter/setter 控制单值）、effect（依赖收集与触发）等核心机制。系统采用订阅-发布模式，通过 track 收集依赖，trigger 触发更新，ReactiveEffect 封装副作用函数。computed 实现缓存机制，watch 监听数据变化。整个系统通过代理对象和依赖收集构建高效响应式架构。
2025-06-30 09:36:16
351
原创 Vue 3 中 computed 和 watch 的区别 + 原理 + 写法详解
Vue 3 中 computed 和 watch 的核心区别在于：computed 用于声明式返回派生数据并缓存结果，适合模板绑定；watch 用于响应数据变化并执行副作用操作，适合异步请求或逻辑处理。computed 自动追踪依赖，而 watch 需手动配置监听对象。watch 有三种写法：监听单个 ref、数组监听多个值、函数式监听表达式，还支持深度监听等高级选项。computed 可设置 getter/setter 实现双向绑定。选择原则：需要返回值用 computed，需要响应变化做操作用 watc
2025-06-30 09:34:42
581
原创 Webpack 中的 Loader 和 Plugin 全面详解
本文全面解析了Webpack中Loader和Plugin的核心区别与使用方法。Loader本质是转换模块源码的函数，负责处理非JS文件（如.vue、.ts、.scss等），配置在module.rules中，多个Loader从右向左执行。Plugin则是具有apply方法的类，用于扩展Webpack构建能力（如生成HTML、优化资源等），通过hooks介入构建生命周期，配置在plugins数组中。关键区别：Loader专注模块转换，Plugin处理全局构建流程。二者配合使用（如sass-loader处理样式，
2025-06-29 11:10:51
637
原创 Webpack 热更新（HMR）原理详解
Webpack热更新(HMR)机制详解：浏览器无需刷新即可替换变更模块，保持组件状态。原理包括dev-server监听源码、WebSocket通知变更、HMR Runtime应用更新。文章对比HMR与Live Reload差异，提供Vue/React实现示例及常见问题排查方案，强调其在现代前端开发中提升效率的关键作用。
2025-06-29 10:59:09
874
原创 小程序首屏加载优化全攻略
小程序首屏加载优化指南 首屏加载慢的关键原因包括主包体积过大、网络请求过多、图片资源过载及渲染逻辑复杂。优化策略如下： 1️⃣ 包体优化：拆分主包（≤2MB），移除无用资源，图片/组件懒加载； 2️⃣ 接口优化：合并请求、设置缓存、分阶段加载数据； 3️⃣ 渲染提速：使用骨架屏、分区域渲染、避免复杂组件； 4️⃣ 预加载技术：预加载页面或延迟非核心内容。 通过微信开发者工具分析性能指标（包大小、白屏时长等），结合分包、懒加载和轻量化组件，可显著提升用户体验。 核心目标：减小体积、加速请求、简化渲染、增强感知
2025-06-27 13:46:25
888
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人