- 博客(26)
- 收藏
- 关注
RSS订阅原创 【Nginx前端需要了解的基础配置】
本文介绍了前端开发中常用的Nginx配置方案，主要包括静态资源部署、跨域处理、HTTPS设置、压缩优化等核心功能。内容涵盖了SPA路由适配、反向代理解决跨域、SSL证书配置、Gzip压缩等实用技巧，并提供了防盗链保护和前端路由适配等进阶配置。针对每种场景都给出了具体配置示例和关键参数说明，最后还列出了常用的Nginx操作命令。这些配置能帮助前端开发者高效解决部署和优化中的常见问题，提升Web应用性能和安全性。
2025-08-11 11:05:36
365
原创 【vue3渲染过程、diff算法、render函数】概览
Vue3渲染流程从模板编译、响应式初始化到虚拟DOM生成与更新，通过Diff算法优化DOM操作。相比Vue2，Vue3采用Proxy代理实现响应式，编译时标记静态节点提升性能。Diff算法采用同层比较策略，通过双指针遍历优化列表对比，减少DOM操作。理解这一流程有助于编写高效Vue代码，合理利用响应式特性和虚拟DOM机制提升性能。
2025-08-11 07:00:00
1175
原创 【react Hook与vue Hook？】搞搞明白
React Hook 和 Vue 组合函数（Composables）都是用于逻辑复用的工具，但在实现和使用上存在差异。React Hook 严格限制调用位置，依赖显式状态更新；Vue 组合函数则更灵活，基于自动响应式系统。自定义时，两者都遵循"封装逻辑、暴露状态/方法"的模式，通过函数抽离重复逻辑，提高代码复用率。React Hook命名以use开头，Vue组合函数通常也遵循此约定。最佳实践包括保持单一职责、提供可配置性、合理清理副作用等。
2025-08-10 18:05:45
941
原创 【webPack｜Vite】了解常用配置，主要差异
Webpack与Vite作为主流前端构建工具，在构建原理、开发体验和性能表现上存在显著差异。Webpack作为老牌打包工具，采用"先打包再启动"模式，支持复杂项目定制但配置繁琐；Vite基于浏览器原生ES模块特性，开发时无需打包，实现了极速启动和热更新。生产环境下Webpack仍保持完整打包能力，而Vite则基于Rollup进行优化打包。Vite在开发体验和现代项目支持上更优，适合中小型项目；Webpack则凭借成熟生态和深度定制能力，仍是大型复杂项目的首选。随着ESM普及，Vite代表
2025-08-10 17:32:38
947
原创 【布局适配问题】响应式布局、移动端适配、大屏布局要点
响应式布局、移动端适配和大屏布局是前端开发中针对不同设备的设计策略。响应式布局通过流体网格、弹性媒体和媒体查询实现一套代码适配多设备，强调移动优先原则。移动端适配侧重于小屏设备的视口设置、触摸交互优化和性能提升，确保可用性和便捷性。大屏布局则充分利用宽屏空间，采用多列扩展、内容分层和高分辨率适配，突出信息层次和远距可读性。三者各有侧重，但共同目标是提供一致的用户体验，根据设备特性优化功能、信息和操作方式。
2025-08-10 16:39:58
819
原创 【npm、yarn、pnpm】特点对比，按需选择
2023 年新项目采用 pnpm 的比例快速增长（Vue 3、Vite、Next.js 等官方推荐）。
2025-08-10 14:36:22
403
原创 【Vue2与Vue3的核心区别】响应式、运行时、编译器
Vue2与Vue3在响应式系统、运行时机制和编译器三个核心维度有显著差异。Vue2采用Object.defineProperty实现响应式，存在属性监听局限；Vue3基于Proxy实现全场景监听。运行时层面，Vue2依赖全量虚拟DOM Diff，Vue3通过编译优化实现精准更新。编译器方面，Vue3新增静态分析、动态节点标记等优化。此外，Vue3引入组合式API、支持多根节点模板，并优化了生命周期和TS支持。整体来看，Vue3在性能、开发体验和功能扩展上均有显著提升。
2025-08-10 13:57:11
872
原创 【Vapor Mode】Vue 从“运行时“优化转向“编译时“优化的范式跃迁
Vue 3.6引入Vapor Mode：编译时优化的性能突破 2025年7月发布的Vue 3.6-alpha.1正式引入Vapor Mode，通过跳过虚拟DOM实现性能跃升。该模式在编译阶段直接将模板转为精准的DOM操作指令，减少内存占用、计算开销和包体积，尤其适合高性能场景。支持全局、混合及组件级启用，但暂不支持SSR、过渡动画等功能。Vapor Mode标志着Vue从运行时转向编译时优化的技术范式迁移，建议新项目尝鲜，老项目逐步迁移。开发团队计划进一步扩展生态兼容性，完善生产可用性。
2025-08-09 11:14:39
1342
原创 【vue组件通信】一文了解组件通信多种方式
在 Vue 中，组件通信有多种方式，适用于不同场景（父子组件、兄弟组件、跨级组件等）。以下是完整的组件传值方法总结
2025-08-08 10:43:49
713
原创 【Vue Router】路由模式、懒加载、守卫、权限、缓存
本文介绍了Vue Router的核心功能与高级用法，包括路由模式（Hash/History）、懒加载优化、组件缓存、路由守卫和权限控制。重点讲解了如何通过<keep-alive>实现组件状态缓存，使用路由守卫进行导航控制，以及动态路由与后端菜单的集成方案。文章还提供了路由懒加载配置示例、权限验证流程和Nginx服务器配置，帮助开发者构建高效、安全的单页应用。这些技术组合能显著提升应用性能，实现细粒度的访问控制和流畅的用户体验。
2025-08-08 01:43:07
895
原创 【一文看懂token和session】
Token（令牌）是前后端身份验证的核心机制，通过加密生成唯一令牌，避免频繁登录。流程分为生成、存储、传输和验证四个阶段：用户登录后服务器生成Token并返回前端；前端存储在localStorage或Cookie中；后续请求通过HTTP头携带Token；服务器验证Token有效性。相比Session机制，Token具有无状态、跨域支持等优势，但也存在XSS攻击风险。Session机制则依赖服务器存储会话状态，通过Session ID验证身份，适用于传统Web应用。两种机制各有优劣，需根据场景选择。Token
2025-08-07 23:42:01
796
原创 【session、cookie、sessionStorage、localStorage 】
Web 开发中常用的四种存储技术对比： Cookie：客户端存储（4KB），自动发送到服务器，适合身份验证和状态保持，可设置过期时间。 Session：服务器端存储，通过 Session ID 识别用户，适合保存登录状态等敏感数据，会话结束失效。 localStorage：客户端持久化存储（5-10MB），不随会话结束清除，适合长期保存用户偏好设置。 sessionStorage：客户端临时存储（5-10MB），仅在当前标签页有效，适合保存临时表单数据。 主要区别： 存储位置：Session 在服务器，其余
2025-08-07 23:15:59
590
原创 【iframe】基本使用以及动态创建和销毁
tip有些场景在使用iframe后，资源没有得到释放，造成页面卡顿，比如二级弹框里面显示iframe,在关闭弹框后没有进行销毁，造成不必要的内存占用,有时候销毁iframe是有必要的。
2024-07-14 17:41:27
1232
原创 【状态管理: Pinia与Vuex的区别】Pinia如何使用？和vuex的异同？
状态管理pinia和vuex：Pinia如何使用？和vuex的异同？
2024-07-13 18:04:09
1390
1
原创 【蓝牙|锁屏|小程序】微信小程序：屏幕锁屏或息屏导致蓝牙传输中断
连接蓝牙设备，进行数据传输时，手机息屏后传输中断，外部发送的数据无法接收。
2024-03-21 11:48:58
2024
2
原创 前端导出excel文件，本地下载后无法打开或格式错误
在处理前端下载文件的问题时，我们需要注意数据的格式、响应类型的设置以及如何正确地获取数据。同时，还需要关注项目中可能存在的响应拦截器，确保它们不会影响到我们的下载逻辑。通过仔细地排查和分析，我们可以找到问题的根源并解决它。
2024-03-05 16:32:18
8167
2
原创 【gulp】gulp压缩并抽取HTML代码中的公共代码
最近遇到的一个官网项目，其中涉及到对网页头部文件和底部文件公共代码的提取。由于是刚接手的项目，之前有人已经直接修改打包生成的dist文件用于项目更新，以致于每涉及到修改像头部和尾部等公共文件，都需要对每个html文件进行复制粘贴。所以翻看之前的git提交记录，准备重新把公共提取使用起来，减轻开发负担。
2023-12-29 12:20:05
563
空空如也
TS类型推导，类型定义（专家看过来
2025-08-08
html文件header标签中的@@include是什么？
2023-12-12
TA创建的收藏夹 TA关注的收藏夹
TA关注的人