甄好-CSDN博客

原创 Pinia相对于VueX的区别

Pinia作为Vue官方推荐的状态管理库，相比Vuex具有显著优势。核心差异在于：Pinia取消了Mutations概念，同步/异步操作统一在Actions中完成；采用扁平化模块管理替代嵌套；原生支持TypeScript且体积更小。开发体验上，Pinia代码量减少30%+，类型推导完善，调试更直观。工程化方面，Pinia完美适配Vue3组合式API，是Vue生态的未来方向。建议新项目首选Pinia，老项目可增量迁移。掌握Pinia已成为中高级前端开发者的必备技能，在简历中体现这一能力可提升竞争力。

2026-03-18 10:31:56 337

原创前端全维度安全防护策略（可落地 + 技术实操）

前端全维度安全防护策略摘要：前端安全防护需覆盖输入/输出、请求通信、数据存储、代码部署、浏览器安全五大核心场景。核心防护措施包括：1) XSS防护：输入转义、CSP策略；2) CSRF防护：Token验证、SameSite Cookie；3) 通信安全：HTTPS强制、接口签名、敏感数据加密；4) 存储安全：Cookie HttpOnly、本地数据加密；5) 代码安全：混淆压缩、资源校验。实现需注意前后端协同、安全与体验平衡，并配套监控告警机制。提供检查清单可系统评估防护措施落地情况。（149字）

2026-03-17 14:08:44 396

原创如何使用 Git 分支管理、代码合并与 Code Review 流程，保障团队协作规范。

本文介绍了Git分支管理的规范实践，推荐采用简化版GitFlow模式。规范明确了主分支(main)、开发分支(develop)、功能分支(feature)、修复分支(bugfix)和热修复分支(hotfix)的命名与用途。代码合并必须通过Pull Request流程，包含同步代码、自检、发起PR、CodeReview等步骤。Review人员需检查代码逻辑、规范、性能与安全问题，提出明确建议。关键保障措施包括分支保护、提交信息规范、定期清理分支和文档同步。总结强调通过规范化分支管理、PR驱动合并流程和严格的R

2026-03-15 11:48:21 434

原创浏览器事件流（Event Flow）完整版

事件流是DOM事件传播的完整过程，分为捕获、目标和冒泡三个阶段。捕获阶段从window向下查找目标元素，目标阶段执行目标元素事件，冒泡阶段从目标向上传播事件。通过addEventListener可指定捕获或冒泡阶段触发事件，stopPropagation()可阻止冒泡。事件委托利用冒泡机制，将子元素事件绑定到父元素，提升性能并支持动态元素。部分事件如focus/blur不支持冒泡。理解事件流机制对前端开发至关重要，尤其是事件委托和阻止冒泡等核心应用场景。

2026-03-15 11:45:25 386

原创 Http 中的状态码分析

HTTP状态码分类及核心含义 HTTP状态码分为5大类，按首位数字区分响应类型： 1xx（信息型）：临时响应，如100（继续发送）、101（协议切换） 2xx（成功型）：请求成功处理，如200（成功）、201（创建资源）、204（无内容） 3xx（重定向）：需进一步操作，如301（永久重定向）、304（缓存命中） 4xx（客户端错误）：请求问题，如400（参数错误）、401（未认证）、404（资源不存在） 5xx（服务端错误）：服务器问题，如500（内部错误）、503（服务不可用）常见状态码应用场景包括：

2026-03-14 11:12:10 320

原创 computed 和 watch 的区别

computed 和 watch 核心区别是定位不同：computed 是计算属性，侧重「值的推导」，有缓存、必须返回值、不支持异步，适合数据拼接、过滤等场景；watch 是侦听器，侧重「行为触发」，无缓存、支持异步、无返回值，适合数据变化后请求接口、修改 DOM 等副作用操作。另外，computed 自动深度监听依赖，watch 需要手动开启 deep；computed 初始化就执行，watch 默认懒执行，需开启 immediate 才初始化执行。

2026-03-14 11:11:46 345

原创水平垂直居中的实现方式

摘要：本文系统介绍了8种CSS实现水平垂直居中的方法，按现代开发优先级排序。Flex弹性布局（兼容IE10+）和Grid网格布局（兼容IE11+）是现代项目首选方案，代码简洁灵活。兼容IE9+推荐定位+transform，IE8+可用定位+margin或table-cell布局。单行文本推荐line-height+text-align，极致兼容（IE6+）可选负margin。建议现代项目优先使用Flex布局，子元素宽高未知时避免负margin/calc，极致兼容场景选择传统方案。不同场景的选型需权衡代码简洁

2026-03-12 15:27:39 354

原创 Webpack 面试核心解析（从基础到深度，覆盖高频考点）

本文系统梳理了Webpack面试的核心知识点，涵盖基础概念、配置实战、性能优化和原理理解四个维度。重点解析了Webpack的核心组成部分（Entry/Output/Loader/Plugin/Mode），详细演示了常用配置示例，包括JS转译、CSS处理和图片优化。针对不同面试层级，提供了构建速度优化、打包体积优化和运行性能优化的具体方案，并深入剖析了Webpack打包流程和热更新原理。特别强调了Webpack5的新特性，如内置缓存和asset模块，同时指出面试中需要避免的常见误区，帮助应试者构建完整的Web

2026-03-12 10:04:04 430

原创前端首屏加载优化方案

摘要：本文提供了一份可直接落地的前端首屏加载优化清单，涵盖资源层、网络层、渲染层、计算层、缓存层和服务端协同6大维度。每个维度包含具体优化步骤、检查项和备注说明，遵循"先基础后进阶、先低成本高收益后深度优化"原则。资源层重点优化代码压缩和按需加载；网络层侧重减少请求数和CDN加速；渲染层避免阻塞和优化DOM操作；计算层利用WebWorker减轻主线程负担；缓存层通过HTTP缓存和ServiceWorker提升二次访问速度；服务端协同优化接口和启用SSR。最后强调性能验证与监控的重要性，确

2026-01-24 13:58:10 1591

原创 Git Flow + ESLint+Prettier 配置详细说明

本文详细介绍了前端项目中的GitFlow工作流和ESLint+Prettier代码规范的配置方法。主要内容包括： GitFlow配置：安装GitFlow扩展工具初始化GitFlow仓库核心分支操作（功能开发、版本发布、紧急修复）分支命名规范和使用场景 ESLint+Prettier配置：安装相关依赖创建配置文件（.eslintrc.js、.prettierrc.js等）配置npm脚本实现代码检查和格式化使用husky和lint-staged实现提交前自动校验团队协作规范： GitFlow的

2026-01-24 13:22:06 709

原创 HTML5语义化标签

HTML5语义化标签通过有明确含义的标签（如header、nav、article等）替代无意义的div，使网页结构更清晰。常用标签包括页面结构类（header、footer等）和文本内容类（h1-h6、figure等）。语义化标签的优势在于提升代码可读性、优化SEO、增强可访问性，并减少无意义的class/id定义。开发时应根据内容选择合适标签，如用article表示独立内容，section划分区块，形成规范的页面结构。

2026-01-23 13:21:49 968

原创响应式中的Flex/Grid 布局与rem/vh/vw 响应式单位

分析在实现响应式过程中使用到的 Flex/Grid 布局与rem/vh/vw 响应式单位在响应式中的使用方法

2026-01-23 13:01:49 417

原创 vue中，上传图片的流程

则显示"File uploaded successfully."消息，否则显示"Failed to upload file."消息。这样，当用户上传文件时，组件会自动将文件提交到服务器，并根据服务器响应显示不同的消息。语句中处理响应，并根据响应数据显示不同的消息或执行不同的操作。我们还添加了一个"Upload"按钮，用于触发文件上传操作。语句中处理响应，并根据响应数据显示不同的消息。首先，你需要在Vue组件中添加一个上传组件，例如。在这里，我们添加了一个上传组件，并将其绑定到。指令将文件绑定到组件中。

2023-05-16 15:43:58 4718 1

个人的技术笔记本，希望同时可以帮助到你，那我非常荣幸。个人博客地址：https://yuhanworld.github.io/