- 博客(295)
- 收藏
- 关注
RSS订阅
原创 如何优化 Vite 项目中的 Lodash 引入：从 Tree Shaking 到自动化测试
在现代前端开发中，优化代码的体积和构建速度是非常重要的。特别是在使用 Vite 作为构建工具时，如何正确地处理 Lodash 这种通用的工具库，变得尤为关键。在本文中，我将分享我们如何在 Vite 项目中优化 Lodash 的引入方式，并确保优化后的代码能够正常运行。我们分析了几个优化 Lodash 引入方式的解决方案，并最终决定采用更适合我们项目需求的方案。
2024-08-16 19:16:29
2372
原创 vue3的自定义hooks
Vue3 的 hook函数的出现，可以让我们更好抽离重复逻辑，聚合相同的功能。它与vue2 中的mixins有点类似，但是相对 mixins 而言， hooks 函数 更清楚复用功能代码的来源,更清晰易懂。使用 Vue3 的组合 API 封装的可复用，高内聚低耦合。1、具备可复用功能，才需要抽离为 hooks 独立文件2、函数名/文件名以 use 开头，形如: useXX3、引用时将响应式变量或者方法显式解构暴露出来；vue3 hooks 现在使用比较广泛，介绍基本概念与原理。
2024-01-11 16:57:04
2179
1
原创 前端本地覆盖资源(local override)调试
Chrome 65 中的开发者工具将包含以下新功能：本地替换新的无障碍工具更改标签页新的搜索引擎优化 (SEO) 和性能审核Performance 面板中的多个录制内容使用 worker 和异步代码执行可靠的代码单步调试本篇文章主要学习与实践下本地替换这个功能提示：以下是本篇文章正文内容，下面案例可供参考官网详细描述。
2024-01-11 09:40:18
1893
原创 vue3项目使用pako库解压后端返回zip数据
外部接口返回一个图片数据是经过zip压缩的，前端需要把这个数据处理成可以显示的图片。大概思路：zip解压-> 转换为base64数据 -> img标签显示。pako详细描述🚀 npm 直达pako 是一个流行的 JavaScript 库，用于在浏览器中进行数据压缩和解压缩操作。它提供了对常见的压缩算法（如 Deflate 和 Gzip）的实现，使开发者能够在客户端上轻松进行数据压缩和解压缩，以减少数据传输大小和网络带宽消耗。
2023-12-29 18:03:04
2800
原创 Vue3+hooks快速接入Lodop打印插件
上面文章《Vue快速接入菜鸟打印组件》讲了vue3如何快速集成菜鸟打印组件，这篇讲讲vue3如何集成lodop组件。在项目的hooks 文件夹下创建一个hook。根据自己的项目，按实际情况命名。这里是 useLodop.ts// 引入上一步骤创建的lodopfuns})try {} else {rawRow: {}) => {if (!LODOP) {return ElMessage.warning('请安装/启动Lodop 打印插件')// 根据打印的类型，获取设置的打印机字符串。
2023-12-15 14:22:59
3281
6
原创 React中修改 state 时必须返回一个新对象 (immutable update)
React通过浅比较(shallow comparison)检测状态变化，要求修改state时必须返回新对象才能触发重新渲染。核心原理是：1）React在processUpdateQueue中使用Object.assign浅合并新旧状态，生成新对象；2）shallowEqual先比较对象引用，若相同则跳过渲染；3）直接修改原state对象属性不会改变引用，导致浅比较认为状态未变化。错误示例中this.state.count=value虽能修改值，但因对象引用未变且React的批量更新机制，可能导致渲染失效。
2025-06-12 13:54:02
779
原创 React & Vue 编译/运行流程
本文系统对比了React与Vue在编译和运行阶段的实现差异。React的编译阶段主要通过Babel将JSX转换为React.createElement调用，并由构建工具完成打包优化；运行时则采用Fiber架构进行异步调度，分为可中断的Render Phase（构建Fiber Tree）和同步的Commit Phase（DOM更新）。相比之下，Vue在编译阶段通过模板编译器生成render函数并实现静态节点优化，运行时则直接处理虚拟DOM的diff与patch。两者核心区别在于：React依赖运行时调度（Fi
2025-06-11 21:52:48
947
原创 React 元素的生命周期
本文系统讲解了React元素（Virtual DOM）的生命周期，主要包括：1）React元素本质是描述UI的JS对象；2）从JSX到真实DOM的完整转换流程；3）各阶段涉及的关键技术（如Fiber架构、Diff算法）；4）以函数组件为例，详细解析挂载、更新和卸载三阶段的具体过程。文章通过流程图直观展示React如何将虚拟DOM转化为真实DOM，并触发相应生命周期钩子，最终揭示React组件更新的核心机制：每次状态变化都会重新走一遍"React元素→DOM"的完整生命周期流程。
2025-06-11 21:34:41
467
原创 Vue Fragment vs React Fragment
摘要：Vue 3与React的Fragment功能在设计理念相似，但实现方式存在差异。Vue Fragment默认启用且无需引入，支持多根节点和插槽，适合模板系统；React Fragment需显式使用，支持key属性，适合列表渲染。两者都不会渲染额外DOM节点，提升性能。Vue在编译优化和静态提升方面表现更好，React则依赖Fiber架构和手动优化。根据项目需求选择：Vue适合插槽与模板场景，React适合灵活逻辑控制与列表渲染。
2025-06-07 11:04:35
1134
原创 Vue3中computed和watch的区别
Vue3响应式系统核心解析：computed vs watch Vue3的computed和watch在响应式系统中扮演不同角色：computed用于派生状态（具有缓存特性，适合模板绑定），而watch用于执行响应式副作用（如API调用）。实现原理上，两者都基于effect机制，但computed通过lazy effect实现缓存和懒执行，watch则直接触发回调。响应式核心依赖track/trigger机制：读取数据时track收集依赖，修改数据时trigger触发更新。watchEffect作为自动依赖
2025-06-07 10:14:04
1074
原创 Next-AI聊天应用-复用chat组件
文章摘要：本文介绍了如何实现聊天历史记录的加载和继续聊天功能的技术方案。主要调整包括：1) 修改API接口以支持按会话ID获取聊天记录；2) 调整侧边栏组件确保正确路由；3) 创建动态路由页面和可复用聊天组件。其中重点对API进行了重构，使其能根据conversationId返回特定会话记录，或根据userId获取用户历史列表。同时将核心聊天逻辑封装为可复用组件，实现了新建聊天和继续聊天的完整功能链路。
2025-06-05 19:41:36
1017
原创 Next.js中Protected Route（受保护路由）
在 Next.js 中实现受保护路由主要有几种方式：1）使用中间件（Middleware）全局拦截请求；2）在 Server Component 中直接校验并重定向；3）通过高阶组件（HOC）保护传统 pages 目录下的页面；4）利用 app 目录的 Layout 组件统一控制。最佳实践是结合 RSC 架构使用 Layout 封装保护逻辑，配合中间件进行全局预检。服务端方案（如 redirect()）能避免客户端闪烁，而客户端方案适合动态页面。文件结构建议将受保护页面分组到 (protected) 目录下
2025-06-05 11:24:53
650
原创 React-props
React 中的 Props 机制详解与高级实践 本文系统介绍了 React 组件通信的核心机制 props，包括基础特性和高级应用模式。主要内容分为： 1️⃣ 基础特性： props 是父组件向子组件传递数据的只读属性 单向数据流、支持任意类型数据 每次渲染都会生成新 props 引用 2️⃣ 核心细节： props 优化（React.memo 和 useCallback） 默认值设置方法 children 插槽的使用 函数作为 props 的闭包问题 3️⃣ 高级模式： Render Props 状态控
2025-05-30 21:57:11
1250
原创 ReactJS 中的 JSX工作原理
本文深入解析了React中JSX的编译机制及其底层渲染流程。JSX通过Babel编译为React.createElement调用，生成虚拟DOM对象。React采用Fiber架构构建Fiber树，通过Reconciliation进行差异对比，最终在Commit阶段更新真实DOM。React 18引入的并发模式利用Fiber实现可中断渲染和优先级调度，采用双缓存机制优化性能。理解这一流程有助于开发者优化渲染性能，合理使用并发特性，并正确设计组件结构。
2025-05-30 21:29:05
1370
原创 shadcn/ui
shadcn/ui 是一个基于 React 和 Tailwind CSS 的现代 UI 组件库，主打高度可控性、无障碍支持和 SSR 兼容。核心特点包括完全自定义样式、Radix UI 底层、组件代码可修改。提供了表单、弹窗、导航等常用组件，通过 CLI 工具快速添加组件到项目。与 MUI、Ant Design 相比，更适合需要深度定制和 Tailwind 集成的开发者。示例展示了如何用 shadcn/ui 组件构建 AI 聊天界面，包含消息列表、输入框和自动滚动功能。适合追求样式自由和技术栈兼容的 Rea
2025-05-30 17:09:19
767
原创 react库：class-variance-authority
cva 是 class-variance-authority 库的核心 API，用于动态生成组件样式变体类名。它通过结构化配置定义基础样式和变体（如不同颜色、尺寸），支持类型安全的动态类名组合。示例展示了按钮组件的实现：定义共享基础样式后，配置 variant 和 size 变体，并设置默认值。相比传统 CSS 手动拼接类名，cva 提供了更清晰的变体管理、原子化组合和自动类型推断，特别适合组件库开发。其优势在于将样式逻辑与组件解耦，通过 buttonVariants({variant,size}) 动态生
2025-05-29 20:38:46
1241
原创 delta 流响应
在调用类 ChatGPT 或 OpenRouter 这类大模型 API 时，**“delta 流响应”**是一种逐步返回内容的方式，用于实现实时输出流式生成文字效果。“delta”指的是 “差值” 或 “增量”，代表本次响应新增的 token 内容。例如，模型输出一句话你好，世界！，它不会一次返回全部，而是返回一个个delta{ "choices": [ { "delta": { "content": "你" } } ] }
2025-05-29 00:01:13
450
原创 SSE（Server-Sent Events）
SSE 流式传输解析指南 SSE（Server-Sent Events）是AI应用中实现流式传输（如大模型逐字输出）的关键协议。其基本格式为纯文本，以data:、event:等字段开头，事件间用\n\n分隔。 解析方式对比 逐行解析：直接按\n拆分处理data:字段，适合标准接口，但容错性差。 缓冲区解析：维护buffer动态提取完整JSON，能处理跨数据块场景，推荐用于生产环境。 实现示例 后端需以text/event-stream格式推送数据（Node.js示例提供）。 前端可通过EventSource
2025-05-28 10:07:09
1350
原创 react问一问
React面试题笔记： useEffect依赖数组[]的作用：空数组表示只在组件首次渲染时执行副作用，常用于初始化操作（如定时器、请求）和清理工作。 setTimeout中使用setState的问题：异步操作可能导致组件卸载后仍调用setState，解决方案包括： 在useEffect清理函数中清除定时器 使用isMounted标志位检查组件状态 通过useRef保存挂载状态 useReducer与useMemo： useReducer适合管理复杂状态逻辑 useMemo用于性能优化，缓存计算结果 关键点：
2025-05-25 09:43:42
1226
原创 协同文档开源方案
本文介绍了7种成熟的开源协同文档编辑解决方案：Etherpad（轻量级实时文本编辑器）、OnlyOffice（全功能办公套件）、Collabora Online（基于LibreOffice）、Tiptap（可定制的富文本编辑器）、ShareDB（实时协作数据库）、ProseMirror（灵活的编辑框架）以及Firebase（实时数据库服务）。这些方案各具特色，支持实时协作、版本控制、多格式文档处理等功能。开发者可根据项目需求（如集成难度、实时性要求、文档格式支持等）选择合适的方案，快速实现协同编辑功能。
2025-05-25 09:16:15
568
原创 前端协同文档实现思路
本文介绍了前端协同文档系统的实现技术和方法，主要包括实时同步机制（WebSocket、OT和CRDT算法）、实时文本编辑（Diff算法和协作框架）、后端实现（数据库同步与技术栈）以及前端技术（React/Vue和WebRTC）。此外，还讨论了功能扩展如版本控制和权限管理，并提供了基于Vue.js和Node.js的简单实现示例。协同文档开发需结合多种技术，确保实时性和数据一致性。
2025-05-25 09:14:10
659
原创 SSG vs SSR vs ISG 页面渲染策略对比
本文对比了SSG、SSR和ISG三种页面渲染策略的核心差异。SSG（静态生成）在构建时预渲染所有页面，性能最优但动态内容支持弱；SSR（服务端渲染）每次请求实时生成页面，支持动态数据但性能开销较大；ISG（增量静态生成）结合两者优势，通过混合生成策略实现性能与动态性的平衡。关键维度包括：SSG适合CDN缓存和固定内容场景，SSR适用于实时个性化需求，ISG则通过按需更新机制兼顾速度与内容新鲜度。实际应用中，Next.js、Nuxt等框架针对不同场景提供了灵活的实现方案。选择策略需权衡性能、动态性、SEO和部
2025-05-24 17:11:09
855
原创 前端错误监听与上报框架工作原理，如：Sentry
Sentry等前端错误监控系统通过劫持浏览器原生错误处理机制和框架生命周期异常，实现错误捕获与上报。其核心流程包括：浏览器层监听：通过window.onerror捕获同步错误使用unhandledrejection事件拦截未处理的Promise错误覆写全局API如console.error和网络请求方法
2025-05-24 10:35:45
1304
原创 TypeScript，枚举（Enum）Vs 常量枚举（const Enum）
在 TypeScript 中，普通枚举（Enum）和常量枚举（const Enum）在编译时的表现有显著差异。普通枚举会生成双向映射的运行时对象，支持动态访问，适合需要反射的场景；而常量枚举在编译时会被完全内联，不生成运行时代码，性能更优，但无法动态访问，且与工具链强耦合。Vue 3 源码不建议使用常量枚举，主要因其工具链兼容性问题（如 Babel 默认不支持）、调试困难以及灵活性限制。Vue 3 推荐使用普通枚举或字面量联合类型，以确保兼容性和可维护性。在库开发中，优先选择普通枚举或联合类型更为合适。
2025-05-22 08:24:23
421
原创 Web Workers 使用指南
Web Workers 是浏览器提供的 JavaScript 多线程解决方案，允许在后台线程中运行脚本，避免阻塞主线程。
2025-05-21 23:12:54
500
原创 Vue大数据量前端性能优化策略
在处理 Vue 项目中约 1000 条数据（约10MB）的图表与列表混合渲染时，性能优化至关重要。本文介绍了多种优化策略，包括虚拟列表、懒加载、Web Worker、图表渲染优化和分批渲染等。虚拟列表通过仅渲染可视区域内的列表项，显著提升渲染性能，避免一次性渲染大量 DOM 节点。懒加载技术则通过延迟加载不在视口内的内容，减少首屏渲染压力，适用于长列表和图表的按需加载。Web Worker 可用于在后台线程中处理复杂的数据计算，避免阻塞主线程，提升图表数据预处理的效率。通过这些优化手段，可以有效提升大型数据
2025-05-21 22:57:45
1772
原创 React 常见的陷阱之（如异步访问事件对象）
在 React 开发中，处理合成事件时可能会遇到一些常见问题，如异步访问事件对象、事件传播误解、事件监听器未正确卸载等。针对这些问题，可以采取以下解决方案：在异步操作前提取事件属性或使用 e.persist() 保留事件对象；使用 e.nativeEvent.stopImmediatePropagation() 完全阻止事件传播；在 useEffect 或 componentWillUnmount 中清理事件监听器；在动态列表中使用 data-* 属性或 useCallback 优化事件绑定；避免直接通过
2025-05-20 22:17:42
831
原创 React的合成事件（SyntheticEventt）
React的合成事件（SyntheticEvent）是React为了统一不同浏览器的事件处理行为而封装的一套跨浏览器事件系统。与原生事件相比，合成事件在事件绑定方式、事件委托机制、事件对象、事件池、事件传播与阻止冒泡、执行顺序、自动绑定管理、兼容性和事件类型覆盖等方面存在显著差异。合成事件通过事件委托到根节点，减少了内存消耗，并统一了跨浏览器的属性。然而，在混合使用合成事件和原生事件时，需注意执行顺序和事件传播的影响。对于特殊场景，如非冒泡事件，仍需依赖原生事件处理。总体而言，React合成事件提供了跨浏览
2025-05-20 21:54:39
1091
原创 HTTP 协议的发展历程及技术演进
HTTP协议自1989年由蒂姆·伯纳斯-李提出以来，经历了多个版本的演进。最初的HTTP/0.9仅支持简单的GET请求，无状态码和头部信息。HTTP/1.0引入了状态码、头部和多种内容类型，但仍存在每次请求需新建TCP连接的问题。HTTP/1.1通过持久连接、管线化和分块传输编码等改进，显著提升了性能，并支持虚拟主机和更精细的缓存控制。HTTP/2则采用二进制分帧、多路复用和头部压缩等技术，进一步提高了传输效率，并支持服务器推送。尽管HTTP/2解决了应用层的队头阻塞，但传输层的队头阻塞问题在HTTP/3中
2025-05-20 08:17:47
1477
原创 JavaScript 中的五种继承方式进行深入对比
本文详细对比了JavaScript中的五种继承方式：原型链继承、构造函数继承、组合继承、寄生组合继承以及ES6的class extends继承。每种方式的核心原理、示例代码、优缺点及应用场景均进行了深入分析。原型链继承通过子类原型指向父类实例实现继承，简单但存在引用属性共享问题；构造函数继承通过在子类构造函数内调用父类构造函数实现属性继承，但无法继承方法；组合继承结合了前两种方式的优点，既继承属性又继承方法；寄生组合继承进一步优化组合继承，减少父类构造函数调用次数；ES6的class extends继承语法
2025-05-19 23:34:49
1511
原创 uniapp的适配方式
文章摘要： uni-app 在适配多终端屏幕方面表现出色，通过统一的 rpx 单位（响应式像素）实现一套代码在 App、小程序、H5 等平台上的视觉一致性。rpx 根据屏幕宽度自动缩放，编译时转换为各平台的对应单位，如微信小程序的 rpx、H5 的 vw 和 App 的 px。默认设计稿以 750px 宽度为基准，开发者无需手动处理媒体查询或 DPR 缩放。uni-app 还解决了字体缩放、底部安全区、刘海屏等特殊平台的适配问题，提供多端兼容性支持。调试时建议使用 750px 设计稿，并避免使用 px 单位
2025-05-18 22:00:07
906
原创 uniapp中的easycom工作机制
uni-app 中的 easycom 是一种自动组件注册机制，能够简化组件的使用流程，提升开发效率。通过 easycom，开发者无需在页面中手动引入和注册组件，直接使用组件标签即可。其工作原理是通过自动扫描 components 目录下的 .vue 和 .nvue 文件，将组件名作为标签名进行注册。easycom 在编译阶段生效，支持自定义匹配规则。配置方式是在 pages.json 中设置 easycom 属性，启用自动扫描并定义规则。easycom 的优点包括减少样板代码、提升维护性、支持按需引入等，但
2025-05-18 10:45:04
1078
原创 React 中，闭包陷阱
在 React 中，闭包陷阱常见于 Hooks 和异步操作中，表现为捕获过期变量值。典型场景包括 useEffect 中捕获初始状态值，导致后续操作无法获取最新状态。解决方案包括：1. 正确声明依赖数组，确保闭包捕获最新值；2. 使用 useRef 存储可变引用，穿透闭包获取最新值；3. 使用函数式更新（如 setCount(c => c + 1)），直接基于最新状态更新；4. 通过 useCallback 冻结闭包，控制函数重新创建时机。此外，在异步操作和自定义 Hooks 中，合理管理闭包依赖也是
2025-05-17 14:52:41
969
原创 JavaScript 的编译与执行原理
本文深入探讨了 JavaScript 的编译与执行过程，重点解析了词法分析、语法分析、语义分析等编译阶段，以及执行上下文、作用域、作用域链和闭包等核心概念。文章指出，JavaScript 虽然是解释型语言，但在执行前仍会经历编译阶段，生成抽象语法树（AST）并创建执行上下文。通过词法环境和变量环境，JavaScript 实现了作用域链的构建，而闭包则是函数与其定义时词法环境的组合，能够“记住”外部变量。文章还通过示例代码展示了 var 和 let 在循环中的作用域差异，并强调了理解这些概念对编写和调试 Ja
2025-05-17 14:45:45
1043
原创 Uniapp、Flutter 和 React Native 全面对比
本文对 Uni-app、Flutter 和 React Native 三大跨平台移动应用开发框架进行了全面对比，涵盖性能、跨平台能力、学习曲线、社区生态、原生扩展、UI 渲染、企业应用和开发效率八个维度。Uni-app 基于 Vue.js，支持多端发布，学习曲线平缓，社区生态以中文为主；Flutter 使用 Dart 语言，性能接近原生，UI 表现一致，但学习成本较高；React Native 基于 JavaScript 和 React，前端开发者易于上手，社区资源丰富，但性能在复杂场景下可能受限。三者各有
2025-05-17 10:21:40
1492
原创 uni-app 中适配 App 平台
uni-app 在适配 App 平台时，采用混合开发架构（Hybrid App Runtime），核心是 WebView 与原生容器的结合。前端代码运行在 WebView 中，通过 plus.* API 调用原生能力（如摄像头、定位等），并通过 JSBridge 实现 Web 层与 Native 层的双向通信。这种架构称为“HTML5+ Runtime”，由 DCloud 自研，支持 Android 和 iOS 平台。开发者可以通过 plus.xxx API 调用原生功能，并通过回调机制获取结果。uni-a
2025-05-16 23:15:34
1280
原创 uni-app 高级面试题详解
本文详细介绍了 uni-app 框架的原理、项目架构、性能优化、安全与权限管理以及场景实战应用。uni-app 通过 Vue.js 和条件编译实现“一套代码多端运行”，支持 H5、小程序和 App 平台。项目架构建议模块化设计，使用 Pinia 进行状态管理，并封装组件库和实现国际化。性能优化包括页面懒加载、资源压缩和缓存策略。安全方面涉及页面权限控制和防止重复提交。实战场景包括支付封装、自动跳转计时器和离线页面支持。最后，文章指出 uni-app 在复杂动画、Web 性能和插件生态方面的局限性。
2025-05-16 23:03:24
774
空空如也
lodop 如何自适应布局？
2023-12-19
TA创建的收藏夹 TA关注的收藏夹
TA关注的人