- 博客(199)
- 收藏
- 关注
RSS订阅
原创 前端 如何减少前端白屏时间？从原理到实战优化全攻略
《前端白屏优化全链路解决方案》从原理到实践系统介绍了减少白屏时间的优化策略。文章首先分析白屏时间的定义及三大成因：网络慢/包体积大、资源阻塞渲染、首屏JS执行过久。然后分网络层、资源加载、构建与代码、渲染层面四个维度提出具体优化方案，包括开启Gzip压缩、CDN加速、懒加载路由、关键CSS内联、骨架屏等关键技术。特别针对SPA应用提供了路由懒加载、第三方库CDN化等针对性建议，并给出5条极速优化方案。最后还包含白屏监控方法和面试高频问答，总结出"体积更小、下载更快、阻塞更少、执行更轻"的
2026-04-14 10:51:36
426
原创 # React18+ 并发渲染致命深坑：99%前端踩过的 Ref 脏数据污染
本文揭示了React18+并发模式下useMemoizedFn的致命隐患：在低优先级渲染被丢弃时，由于在render阶段直接更新ref，会导致UI与缓存函数数据不一致。作者通过分析并发渲染机制和复现案例，指出问题根源在于React无法回滚手动ref写入。解决方案包括：1）React19的useEffectEvent（仅限Effect内使用）；2）作者实现的并发安全版useMemoizedFn，通过将ref更新延迟到commit阶段。文章对比了各方案的适用场景，强调安全版虽有一帧延迟但适合业务事件处理，并提供
2026-08-03 16:35:20
226
原创 前端核心性能指标全解（CWV三大指标+辅助指标、检测方式、优化、面试背诵）
本文全面梳理了网页性能优化的核心指标与实用技巧。首先介绍了谷歌官方定义的三大核心Web指标（CWV）：LCP衡量首屏加载速度（优秀值≤2.5s），INP评估交互响应（≤200ms），CLS检测布局稳定性（≤0.1），并分别给出劣化原因和优化方案。其次分类整理了各类辅助性能指标，包括加载时序、交互阻塞、运行流畅度等指标。然后详细说明了五种检测方法，从Lighthouse一键测试到线上埋点监控。最后提供了开发注意事项、高频面试题和速记要点，强调真机弱网测试的重要性及"加载→交互→稳定"的优化优先级。全文系统性地
2026-06-11 11:36:22
271
原创 前端性能优化：非关键脚本/第三方资源异步加载全解（彻底解决首屏阻塞）
文章摘要 本文深入探讨前端性能优化中非关键脚本和第三方资源的异步加载策略，解决首屏渲染阻塞问题。主要内容包括： Script标签默认行为：普通<script>会同步阻塞HTML解析和页面渲染，导致首屏白屏问题。 三种加载模式对比： 默认同步模式：阻塞渲染，顺序执行 async模式：异步下载，无序执行 defer模式：异步下载，有序执行，最优方案 框架最佳实践：提供动态创建script标签的通用工具函数，适用于Vue/React项目，实现异步加载、去重和容错。 高德地图加载器解析：剖析AMapLoader底层
2026-06-08 14:35:43
279
原创 前端全量资源预加载优化指南（React内置API + Vue实现 + prerender/prefetch深度对比）
前端资源预加载优化指南（React/Vue实现） 本文全面介绍前端SPA应用的资源预加载优化技术，涵盖React 18内置六大API和Vue实现方案，包括： React预加载API：prefetchDns、preConnect、preLoad、preInit、preloadModule、preinitModule，详细分析各API功能、使用场景及优先级关系 低优先级预获取：prefetch与preLoad的区别，React封装实现方法 整页预渲染：prerender技术原理、性能开销及关键注意事项 Vue实
2026-06-08 13:52:28
294
原创 React18 flushSync 完整深度解析
摘要：React18的flushSync API用于强制同步执行状态更新和DOM渲染，跳过React的并发调度和批处理机制。文章全面解析了flushSync的核心作用、基础用法、适用场景（如DOM测量、焦点控制）和禁止使用场景（如渲染体内调用）。重点拆解了8种执行场景，包括前置setState、内部多状态更新、嵌套调用、异步代码、异常处理等，并通过示例代码详细说明。同时提供了避坑指南（如避免滥用、异步回调处理）和与Vue nextTick的对比。最后包含高频面试题及答案，帮助开发者深入理解flushSync
2026-06-08 12:57:12
430
原创 Vue3 onWatcherCleanup 深度剖析：为何不能在 await 后调用？附请求取消实战
Vue3.3新增的onWatcherCleanup是watch/watchEffect的专属清理钩子，用于在监听回调重新执行前或组件卸载时自动执行清理操作，如取消请求、清除定时器等。其核心原理是：必须在同步代码阶段（await之前）调用才能正确绑定到当前Watcher实例，异步代码中调用会因丢失上下文而报错。文章详细介绍了使用规范、实战案例（接口防抖、封装Hook）以及常见避坑指南，强调清理函数必须前置、AbortController需每次新建等最佳实践，并提供了面试高频考点解析。该API能有效解决重复请求
2026-06-05 13:57:17
190
原创 根据自定义的颜色生成一整套相关的主题色（手写Arco Design色彩生成算法）
本文介绍了如何从零实现Arco Design的色彩生成算法，主要包括以下内容： 色彩模型基础：对比HEX和HSL颜色格式，解释HSL更适合色彩算法的原因（色相固定，只需调整饱和度和明度）。 Arco色板规范：10阶色板生成规则，6号为主色，1-5变浅，7-10加深，暗黑模式明度翻转并降低饱和度。 核心算法实现：提供完整的JS代码，包含HEX/HSL互转函数和色板生成逻辑，支持亮色/暗黑模式。 实战应用： 提供可直接预览的HTML代码 项目落地注意事项（边界处理、黑白特殊值、暗黑模式优化等） 推荐生产环境使用
2026-06-01 11:03:01
194
原创 前端主流状态管理全家桶：Vuex/Pinia/Redux/Zustand/MobX 从入门到原理、实战、面试全解
本文全面解析前端五大主流状态管理库（Vuex、Pinia、Redux、Zustand、MobX），涵盖基础用法、核心原理、实战案例及面试要点。文章从横向对比入手，详细分析各库在适配框架、编程思想、TS支持等方面的差异。针对Vue生态重点讲解Vuex的数据流规范和Pinia的简化设计；对React生态则深入Redux的单向数据流和中间件机制。提供可直接运行的代码示例，并总结各库的最佳实践和常见面试题，适合开发者系统学习状态管理技术。
2026-05-27 18:46:34
412
原创 Vue2 $set 深度解析 + 批量更新全套优化方案（原理+实战+踩坑+面试）
本文深入解析 Vue2 中 $set 的原理与性能优化方案。针对批量更新导致的卡顿问题，指出核心瓶颈在于 watch/computed 重复执行而非视图渲染。通过分析表格场景整体替换数组的性能缺陷，提出三套优化方案：状态锁拦截、非响应式副本更新和 Object.assign 批量赋值。特别强调 Object.assign 与直接赋值的等效性及适用场景差异，最终给出智能混用方案，自动区分新旧属性实现最优性能。文章包含生产验证代码、常见踩坑点和面试题，为 Vue2 响应式优化提供全面指导。
2026-05-27 15:56:54
384
原创 前端 Jest 单元测试零基础实战：模板、提效、避坑、面试题（Vue 项目可用）
本文是一篇前端 Jest 单元测试实战指南，从零基础入门到项目落地，涵盖基础认知、环境搭建、核心语法、万能模板和提效技巧。文章首先区分 Jest 与 console.log 的差异，强调 Jest 的自动化测试优势。随后提供通用 JS 和 Vue 项目的配置方案，并给出可直接复用的测试模板，包括纯函数、Vue 组件和异步场景的测试写法。最后推荐使用 AI 工具自动生成测试代码，大幅提升效率。核心观点是单元测试应优先覆盖工具函数、公共组件和核心逻辑，平衡质量与开发效率。
2026-05-27 15:43:09
422
原创 Vue 生产环境打包：SourceMap、压缩、混淆、Gzip、多环境配置 企业级最佳实践
本文全面讲解Vue生产环境打包的企业级最佳实践，涵盖SourceMap、代码压缩/混淆/Gzip配置及多环境管理。核心内容包括：1) 区分SourceMap关闭、代码压缩、混淆和加密的不同作用；2) 提供开发/测试/预发/生产四套环境的标准配置方案；3) 给出Vue CLI和Vite的完整生产配置代码；4) 配套Nginx Gzip配置和验证方法。文章还总结了常见踩坑点和高频面试题，推荐开发/测试环境保留源码映射，生产环境关闭SourceMap并启用压缩+混淆+Gzip，在保证安全性的同时实现最优性能。
2026-05-27 12:57:11
451
原创 Vue 生产环境打包：SourceMap、压缩、混淆、加密全解 + 最佳实践
Vue生产环境打包优化全解 本文全面解析Vue项目生产环境打包的四大核心概念：SourceMap、代码压缩、混淆和加密。通过对比表清晰展示各项配置对包体积和安全性的影响，提供开箱即用的Vue CLI和Vite配置方案。重点包括： 必须关闭SourceMap防止源码泄露 压缩+混淆是最佳平衡方案，能减小体积同时提升安全性 高强度加密仅适用于敏感业务，会显著增大包体积 详细解决混淆后代码报错、日志丢失等常见问题 附赠高频面试题及答案，涵盖原理、配置和异常处理 最佳实践推荐：生产环境关闭SourceMap+开启压
2026-05-27 12:29:54
437
原创 Trae IDE 实战：打造“创建完美智能体助手”（交互式+自动生成+模板删减，新手无脑上手）
Trae IDE智能体助手开发指南摘要 本文介绍如何利用Trae IDE开发"创建完美智能体助手"，该工具具有三大核心功能：交互式引导设计、自动扫描项目上下文预填信息、模板化生成可部署配置。系统通过5大模块构建智能体框架（技能体系、命令系统、规则体系等），并深度整合Trae原生能力，包括自动扫描项目技术栈、支持模板删减和自动校验。操作流程分为三步：启动智能体、交互式引导和部署配置，新手无需编程即可完成。最终输出结构化设计文档和Trae原生配置包，支持一键部署使用。文中提供了完整的Prom
2026-05-14 16:00:55
722
原创 微前端 qiankun 双 Token 完整实现（生产级标准）
本文介绍了微前端架构下基于qiankun的双Token认证方案，该方案符合企业级生产标准。核心设计采用access_token(内存存储)和refresh_token(HttpOnly Cookie存储)分工机制，实现安全认证、自动续期和防XSS/CSRF攻击。主应用统一管理登录、刷新和登出流程，子应用仅监听全局状态变化。方案强调access_token不落地存储、refresh_token不可被JS读取等安全原则，并提供了完整的代码实现，包括全局状态管理、axios拦截器、自动刷新等关键逻辑。该方案解决了
2026-05-14 13:02:32
434
原创 Qiankun 微前端全解｜从原理、实战、通信、隔离、安全、部署到面试
本文全面解析了Qiankun微前端架构的核心原理与实践方案。文章首先对比了div容器与iframe的优劣，指出Qiankun通过JS沙箱和样式隔离实现可控隔离。详细介绍了主子应用通信的三种方式（全局状态、props传参、事件总线），并强调token传递的安全风险。在应用隔离方面，分析了ProxySandbox和SnapshotSandbox两种JS沙箱机制，以及四种样式隔离方案的适用场景。针对公共依赖复用问题，提出通过webpack externals实现全局共享。最后，重点阐述了生产环境双Token安全架
2026-05-14 11:56:34
490
原创 微前端 Qiankun 主子应用通信｜生产级实战代码 + 完整避坑指南
本文详细介绍了基于qiankun的企业级微前端架构实现方案，涵盖主应用与子应用的完整生产级代码。主应用负责全局状态管理（token、权限等）、事件总线通信（mitt）和子应用注册配置，子应用通过标准生命周期接入。重点包括：三种通信方式分工（initGlobalState全局状态、props初始化参数、mitt事件通知）、生产环境配置（沙箱隔离、预加载、Nginx部署）、内存泄漏防范（卸载时清理监听）等核心实现。方案提供Vue2/Vue3通用代码，适用于需要独立开发部署的复杂前端系统。
2026-05-14 11:26:55
403
原创 Vue2 $set 频繁调用到底会不会影响性能？为什么整体替换数组反而更卡？
摘要： Vue 2中频繁使用$set确实会影响性能，主要原因是每次调用都会触发dep.notify()通知依赖更新，即使视图渲染会被合并。优化建议包括：批量操作时合并更新、避免在watch中使用$set导致循环、大数据量优先用Object.assign、不要对已有响应式属性使用$set、数组操作选择合适方法，以及子组件禁止通过$set修改props。合理使用$set可平衡开发效率与性能，关键要区分"新增响应式属性"和"更新已有属性"的场景。
2026-05-13 15:31:01
433
原创 Vue2业务组件库生产级最佳实践：零依赖+依赖注入方案
Vue2业务组件库生产级最佳实践：零依赖+依赖注入方案 摘要 本文提出Vue2业务组件库生产级解决方案，解决传统方案导致的代码冗余、版本冲突等问题。核心采用零依赖+依赖注入架构： 组件库不安装vue/vuex/axios，完全复用业务项目依赖 通过setGlobalConfig注入UserModule/AppModule等业务模块 集成CSS抽离、双格式构建等全套生产优化 实现低耦合、多项目复用，同时解决热更新、版本冲突等痛点 方案适用于企业级中后台系统，实现业务组件的高效复用和维护，相比标准UI组件库更贴
2026-04-23 18:14:38
470
原创 Vue2/Vue3 vue-i18n完整改造流程（异步懒加载+后端接口请求）
本文详细介绍了Vue2/Vue3项目中实现国际化的完整改造流程，重点讲解了如何通过vue-i18n实现异步懒加载优化首屏性能、动态请求后端接口合并语言包等核心功能。文章对比了4种主流国际化方案，说明选择vue-i18n的原因，并提供了Vue2(vue-i18n@8.x)和Vue3(vue-i18n@9.x)的具体实现步骤，包括安装配置、目录结构、语言包编写、核心异步加载逻辑等。内容涵盖从基础配置到高级应用，附带可复现代码和注意事项，适合项目改造和面试准备。
2026-04-23 17:51:54
519
原创 React18 Hooks 项目重构为 Vue3 组合式API的坑
React18 Hooks与Vue3组合式API表面相似但底层逻辑完全对立，开发者转换时极易踩坑。核心差异在于React采用不可变数据+快照闭包模型，而Vue3基于Proxy响应式系统。主要坑点包括：reactive解构会丢失响应式（需toRefs）、ref必须.value访问、watch监听reactive需getter函数、setup执行时机过早导致DOM获取失败、闭包取值逻辑与React相反、computed默认只读、自定义Hook易内存泄漏等。这些差异源于Vue3的Proxy响应式与React的不可
2026-04-23 14:21:53
476
原创 企业级低代码平台落地实践：JSON驱动+自动渲染+代码生成全方案
企业级低代码平台落地：1、自动生成JOSN：前端编排系统（原子组件BaseMFZTable生成各种基础模块（BaseTable、BaseForm、Base）的配置，基础模块配置组成业务模块（比如业务组件BaseSearchTable含有baseForm、baseTable、baseButtonList，还有复杂的合同表格等等），业务配置模块 组成页面模块（采购合同、进口入库、销售结算、进口发票等），查询页面可以查询所有模块的配置，可以编辑、新增、删除，同时可以复制之前的模块生成新的模块）生成json配置（
2026-04-22 15:51:41
496
原创 Vue2 高德地图地址选择器完整实战（组件抽离+高并发优化+@amap/amap-jsapi-loader最佳实践）
本文为零基础开发者提供Vue2集成高德地图JSAPI的完整实战指南，涵盖环境搭建、技术选型、核心代码实现及上线部署全流程。采用高德官方推荐的@amap/amap-jsapi-loader方案，替代已停止维护的vue-amap第三方库。文章包含详细分层架构设计（视图/业务分离）、6个常用插件详解、完整注释代码（可直接复用），以及key配置、异步加载、性能优化等关键注意事项。特别提供高频面试题解析，帮助开发者快速掌握企业级地图组件开发技能，实现地址搜索、定位、标点等核心功能，代码开箱即用。
2026-04-20 16:23:15
454
原创 前端日期库对比：Moment.js vs Day.js（项目迁移+面试必背）
摘要： Moment.js曾是前端日期处理标杆，但已停止维护，存在体积大、可变对象等问题。Day.js凭借轻量（核心仅2KB）、不可变、API兼容Moment等优势成为现代项目首选。本文对比了两者差异，提供从Moment迁移到Day.js的实操方案，包括按需引入插件、不可变特性注意事项及高频业务封装代码。Day.js支持插件化扩展，完美兼容Moment语法，迁移成本极低，能显著提升项目性能和可维护性。对于新项目建议直接采用Day.js，老项目可平滑迁移以获得体积优化和持续维护支持。
2026-04-16 15:26:34
358
原创 ES6～ES17 (ES2015~ES2026) 全套新特性详解（2026最新版）
本文系统梳理了ES6至ES17的核心新特性，涵盖块级作用域、箭头函数、解构赋值、类与继承、模块化、Promise等里程碑式更新。重点包括： ES6引入let/const、模板字符串、解构赋值、类语法等基础革新； ES7-ES9逐步完善异步编程（async/await）、对象操作和字符串处理； 提供代码示例、使用场景和面试要点，如箭头函数的this绑定、const的引用类型特性等。全文聚焦前端开发高频考点，帮助开发者系统掌握现代JavaScript特性。
2026-04-15 15:59:09
700
原创 Vue3 企业级封装：useEventListener + 终极版 BaseEcharts 组件
本文介绍了Vue3企业级项目中对ECharts的优化封装方案。首先提出原生ECharts使用存在的痛点问题，如重复代码、内存泄漏等。然后详细介绍了两个核心封装： useEventListener Hook：实现自动事件绑定/解绑，防止内存泄漏 BaseEcharts组件：提供响应式option、统一事件派发、自适应、主题切换等功能 重点强调了组件销毁时必须调用dispose的原因，分析了不处理的严重后果。最后给出了使用示例和常见面试题解答。整套方案解决了企业项目中ECharts的复用性、安全性和性能问题。
2026-04-14 14:16:18
255
原创 前端组件化开发最佳实践 + 高频面试题（Vue & React）
本文全面介绍了前端组件化开发的最佳实践，涵盖Vue和React框架的通用原则及专属注意事项。从单一职责、单向数据流到性能优化和内存管理，提供了组件设计的核心准则。针对Vue开发者强调了Props校验、样式隔离和组合式函数的使用；对React开发者则重点讲解Hooks规范、渲染优化和错误边界处理。文章还整理了10个高频面试题及标准答案，包括组件化理解、通信方式和内存泄漏防范等。最后指出优秀的组件应具备职责单一、API简洁、性能优异等特性，帮助开发者提升代码质量和面试表现。
2026-04-14 11:33:30
440
原创 前端性能优化全攻略：六大维度 + 优化路线图 + 高频面试题
《前端性能优化全攻略》系统梳理了六大核心维度：网络层面优化（压缩/CDN/缓存）、资源加载优化（关键路径/懒加载）、构建打包优化（Tree-Shaking/代码分割）、代码逻辑优化（减少DOM操作）、浏览器渲染优化（SSR/骨架屏）和体验感知优化（防抖节流）。文章提供分阶段优化路线图，从诊断瓶颈到监控防劣化，并解答了10个高频面试问题，包括缓存策略、LCP优化、虚拟列表原理等。通过体系化的工程方法，实现从网络提速到用户体验提升的全链路优化。
2026-04-14 11:20:51
610
原创 告别大请求卡顿！原生 CompressionStream 实现 axios 请求体自动 Gzip 压缩（前后端全适配）
在后台管理、批量导入、大数据表单提交场景中，请求体过大会导致接口慢、超时。本文基于浏览器原生 CompressionStream API，结合 axios 拦截器，实现一套零依赖、全自动的请求体 Gzip 压缩方案，压缩率可达 60%~80%；同时附上 Nginx、SpringBoot、Node.js 后端完整解压配置，以及生产环境必看注意事项，前后端一体化提速，可直接复制落地项目。
2026-04-13 13:20:59
394
原创 Vue Hook 与 React Hook 全面解析：区别、用法、实战及避坑指南
Vue Hook 与 React Hook 核心解析 Hook 是现代前端框架中让函数组件具备状态管理和生命周期能力的核心特性。本文从五个维度系统对比了 Vue Hook 和 React Hook： 本质区别：Hook 是绑定组件上下文、能管理状态和副作用的增强函数，与普通工具函数有本质差异 设计理念：Vue 基于响应式依赖追踪更灵活，React 依赖严格调用顺序 状态管理：Vue 使用 ref/reactive 直接修改，React 必须通过 set 函数 副作用处理：Vue 提供多种专用 Hook，Re
2026-04-10 18:46:46
425
原创 迷你 React 调度器（带优先级+时间切片）手写实现
本文介绍了一个迷你 React 调度器的实现方案，包含多优先级队列、时间切片和任务调度功能。该调度器模仿 React 18 的并发特性，使用 MessageChannel 进行任务调度，每帧最多执行 8ms 以避免主线程阻塞。核心功能包括 5 级优先级任务队列、批量执行和自动让出主线程机制，适用于 AI 流式输出、长列表渲染等场景。虽然缺少中断/恢复等高级功能，但实现了 React 调度 80% 的核心能力。文章还对比了与官方 React 调度的差异，并解释了使用 MessageChannel 的优势，最后
2026-04-10 17:26:57
276
原创 Vue3 + SSE 流式输出终极优化：节流 + 时间切片（模拟 React 并发体验）
这篇文章介绍了一个优化Vue3中SSE流式输出的完整解决方案。主要针对中文乱码、消息截断、高频渲染卡顿等问题，提出了一个三层架构设计： 核心优化技术： 使用时间切片调度（模拟React并发机制） 采用节流批量更新（30ms间隔） 标准SSE流式请求封装 自动处理多字节字符避免乱码 关键技术点： SSE流式原理及协议解析 节流控制UI更新频率 时间切片将长任务切割为8ms短任务 协同流程确保不丢消息、不阻塞UI 完整实现包括： useTimeSlicedQueue.js：时间切片调度器 useThrottle
2026-04-10 16:14:19
398
原创 React vs Vue 在 AI 流式对话场景。目前AI交互页面，哪些用的react，哪些用的vue?
产品类型首选框架代表产品C 端 AI 助手、强交互对话ReactChatGPT、豆包、文心一言、Claude多模态、画图、语音流式React企业控制台、内部 AI 工具Vue 3讯飞星火、腾讯混元、各类 AI 后台轻量化 H5、小程序 AIVue 3客服机器人、轻量对话助手追求极致体验、高并发用户React所有头部 C 端 AI国际 AI 产品、C 端强交互、流式体验 → 几乎全是 React国内 B 端、中后台、工具类、轻量化 AI → Vue 更多。
2026-04-10 16:04:59
563
原创 Vue、React.lazy、React 19 异步组件核心区别
摘要： Vue异步组件和React.lazy仅实现组件代码懒加载，不处理数据异步请求；React 19引入的顶层async/await组件则实现了真正的异步渲染，允许组件内部直接await数据请求，集代码分割、数据获取和渲染挂起于一体，功能更强大。三者核心区别在于异步处理能力：前两者仅懒加载代码，后者支持完整异步渲染流程。
2026-04-10 12:28:03
267
原创 React 实现 AI 流式打字机对话：SSE 分包粘包处理 + 并发优化
本文展示了一个基于React的AI流式对话组件实现代码。核心功能包括：1) 通过fetch API发送流式POST请求，支持实时接收AI响应；2) 使用AbortController实现生成中断功能；3) 自动处理SSE(Server-Sent Events)数据流，动态更新对话内容；4) 包含消息滚动、加载状态显示等交互细节。代码模拟了类似豆包官网的AI对话界面，实现了用户输入、流式响应接收、异常处理等完整流程，可作为类似聊天应用的开发参考。
2026-04-09 16:59:09
496
原创 通用构建优化（编译阶段）+ Vue 专属运行时优化 + React 专属运行时优化
本文总结了Vue和React项目的性能优化策略，分为构建阶段和运行时优化两部分。构建阶段通用优化包括代码压缩、懒加载、Tree Shaking拆包、缓存和Gzip压缩等。Vue运行时优化侧重减少渲染开销，建议合理使用v-if/v-show、虚拟列表、v-memo缓存和keep-alive等。React运行时优化则强调使用memo/useMemo/useCallback避免重复渲染，配合虚拟列表和状态拆分。两者都需注意列表渲染时key的使用，避免索引导致性能问题。核心思路都是通过减小体积、减少计算和优化渲染流
2026-04-09 15:46:36
198
原创 Vue 和 React 的核心渲染机制 对比
本文对比了Vue和React的核心渲染机制。Vue通过响应式劫持(Proxy/Object.defineProperty)自动追踪数据变化，依赖收集建立数据与组件的关联，实现细粒度精准更新。React采用不可变状态，通过setState主动触发更新，依赖虚拟DOM的Diff算法进行组件级重渲染，需要手动优化性能。核心区别在于：Vue自动监听变化并精准更新，React需要手动触发并通过虚拟DOM对比更新。记忆要点：Vue是"响应式+依赖收集+精准更新"，React是"状态驱动+虚
2026-04-09 14:22:22
245
原创 Git 常用命令速查表（前端开发专属版）
这篇文章提供了一份专为前端开发者设计的Git命令速查表，按场景分类整理常用命令。核心内容包括日常开发命令、分支管理、回退撤销操作、历史查看和进阶技巧，特别强调了公共分支的操作红线（如禁用reset --hard等危险命令）。还总结了一个简单易记的前端开发口诀"拉→改→加→提→推"，并附上了VS Code/GitLens可视化操作对应的Git命令。该速查表覆盖了前端开发中90%的Git使用场景，既能帮助日常开发，也能在面试和查错时快速参考。
2026-04-09 14:18:55
363
原创 Git 多提交合并为一个完整教程（gitlens可视化工具）干净提交必备！
GitLens可视化Rebase全攻略：通过VS Code高效管理Git提交历史。Rebase（变基）可将当前分支提交"搬家"到目标commit后，实现历史线变直而不改变代码内容。核心操作包括：1）Rebase Current Branch onto Commit用于同步代码和重置分支起点；2）交互式Rebase（支持pick/squash/reword等6种命令）用于合并/修改提交。重点提示：仅限私有分支使用，公共分支绝对禁止变基。文章详细演示了将4个提交合并为1个的实战步骤，并解答了
2026-04-09 13:56:10
939
原创 Git 多提交合并为一个完整教程（git rebase -i）干净提交必备！
本文详细介绍了使用 git rebase -i 命令合并多个提交的完整流程。主要包含：适用场景（个人功能分支的零散提交）、核心前提（仅限私有分支操作）、标准步骤（从查看历史到强制推送）、注意事项（解决冲突和撤销方法）以及常用命令总结。重点强调只能操作个人分支、禁止变基公共分支、合并后必须强制推送等关键原则，帮助开发者保持提交历史的整洁规范。适合需要优化提交历史的开发者参考使用。
2026-04-09 13:16:03
612
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人