前端开发_穆金秋-CSDN博客

原创 Vue3 父子组件传递 props 总结（示例：纯类型标注（Type-only Props Declaration）和运行时对象声明（Runtime Props Declaration））

Vue3中父组件向子组件传递props的常用方式总结：1)按值形态分为静态值(直接传递)和动态值(v-bind绑定响应式变量)；2)按声明方式有数组(简写)和对象(带校验)两种；3)按功能目的包括传递数据、方法和v-model双向绑定；4)特殊场景涉及$attrs透传和provide/inject跨级传递。关键注意事项：props遵循单向数据流原则、动态静态值的本质区别、引用类型默认值需用工厂函数返回。开发中最常用的是动态传递+对象声明校验方式，v-model优先于手动传函数实现双向绑定。

2026-02-12 00:26:21 147

原创前端开发：点击事件使用 @click.prevent 的场景总结

Vue.js中@click.prevent的常见应用场景包括：阻止表单提交刷新页面、避免链接默认跳转、自定义右键菜单、防止文件拖拽默认行为等。它通过调用event.preventDefault()来拦截元素的默认操作，适用于需要完全控制交互逻辑的情况。典型用例有表单按钮、复选框、锚点链接等。对于非交互元素或已处理默认行为的情况则无需使用。开发者可根据需求选择单独使用或与其他修饰符组合（如.prevent.stop）。

2026-02-11 23:05:27 160

原创通用消息组件 bug 修复及更好的实现是使用函数调用组件（优化：弃 createApp 改用 h 函数 + render ）

Message组件只显示一次的原因分析 Message组件在多次触发错误时仅显示一次，主要原因是组件内部状态isVisible未重置。

2026-02-05 15:50:30 756

原创 Vuex4：专为 Vue 3 设计，提供完整 TypeScript 支持

Vuex4中组件与Store交互方式对比

2026-02-04 15:05:41 983

原创 Promise 未捕获 reject 错误处理指南

当Promise被reject且未处理时，浏览器会显示"Uncaught (in promise)"错误。本文介绍了三种常见未处理情况：直接reject、async函数抛出错误和then链中未捕获的错误。提供了四种处理方法：使用.catch()、try...catch、Promise构造函数内部捕获以及全局事件监听（unhandledrejection）。最佳实践建议始终为Promise添加错误处理。

2026-02-04 12:20:16 573

原创 RESTful 前后端传参参数格式总结

本文总结了RESTful API前后端交互的四种传参方式：路径参数（用于资源标识）、查询参数（用于筛选分页）、请求体参数（传输复杂数据）和请求头参数（处理元数据和认证）。详细说明了各参数类型的特点、适用HTTP方法及使用场景，对比了JSON、FormData等请求体格式的优缺点，并提供了混合使用示例。重点强调了参数选择原则：路径参数用于必需资源标识，查询参数用于可选操作，请求体用于完整数据，请求头用于元数据。同时指出了常见误区，如避免在查询参数中传递敏感信息等，旨在帮助开发者设计更符合RESTful原则、高

2026-02-03 16:21:12 903

原创 Vue3 登录状态持久化方案（附：Token 是什么）

Vue3中登录状态刷新后消失的原因在于内存数据重置。解决方案包括：1) 使用localStorage存储token和用户信息；2) 通过Pinia持久化插件自动保存状态；3) 组合式API封装认证逻辑；4) 配合路由守卫控制访问权限；5) 使用Cookie支持SSR。最佳实践建议采用双重存储策略（Vuex+localStorage+sessionStorage），并注意安全性和自动刷新token机制。根据项目需求（SPA/SSR/安全级别）选择合适的持久化方案。

2026-02-03 15:45:36 433

原创＜AI讲故事＞之《蝴蝶的一生》

故事通过小斑点从虫卵到蝴蝶的奇妙蜕变，展现了生命的循环与成长。故事从康康和安安发现蝴蝶卵开始，讲述毛毛虫贪吃蜕皮、化蛹蜕变、最终展翅飞翔的全过程。孩子们在奶奶的引导下观察自然奥秘，见证了生命的奇迹。最后新一代虫卵的出现，预示着生命循环的延续。故事以童话般的语言，将科学知识与成长寓意巧妙融合，传递出对生命和自然的敬畏与热爱。

2026-02-03 15:06:18 788

原创＜AI讲故事＞之《康康安安想玩碰碰车》

故事讲述了康康安安在儿童公园的快乐游玩经历。周六清晨，康康和安安兴奋地和家人来到公园。他们先玩了碰碰车，爸爸和康康驾驶红色战车，妈妈和安安驾驶蓝色战车，在欢声笑语中互相追逐。接着全家乘坐童话般的森林小火车，穿过动物隧道和花田。之后还体验了旋转秋千和大象滑梯。野餐时奶奶准备了动物形状的饼干，父母表扬孩子们懂得礼让和遵守规则。返程时疲惫但满足的孩子们在车上就睡着了，梦里还在回味这快乐的一天。故事展现了亲子互动的温馨和儿童纯真的快乐。

2026-02-03 14:41:11 749

原创＜AI讲故事＞之《康康安安参观巧克力工厂》

本故事纯属虚构，讲述了幼儿园小朋友参观巧克力工厂的奇妙经历。康康、安安和同学们跟随巧克力阿姨，从可可豆的旅行开始，见证了巧克力制作的完整过程：可可豆变身巧克力浆、添加配料、模具成型、精美包装。最精彩的是小朋友们亲自动手制作巧克力，康康做了小汽车形状，安安做了恐龙形状。故事通过生动的工厂场景和童趣对话，展现了巧克力制作的魔法过程，传递了合作与分享的快乐。结尾处孩子们带着甜蜜的巧克力礼物和美好的梦想进入梦乡，为这场巧克力奇遇画上了温馨的句号。

2026-02-03 14:16:40 551

原创＜AI讲故事＞之《康康安安的恐龙大冒险》

《康康安安的恐龙大冒险》康康和安安驾驶红色小飞行器，沿着彩虹桥来到恐龙世界。他们遇见了脖子长长的梁龙先生，背上长着骨板的剑龙，还有追着果子跑的可爱小三角龙。最有趣的是，他们帮助一只迷路的微肿头龙宝宝找到了妈妈。太阳下山前，兄弟俩安全返航，带着满满的恐龙故事进入甜蜜梦乡。这个故事通过彩虹桥、温和恐龙和助人为乐的情节，既满足了孩子对恐龙的想象，又传递了友爱互助的价值观。简短温馨的结尾适合作为睡前故事，激发孩子对世界的好奇心。

2026-02-03 13:53:46 595

原创前端开发中支持跨域的HTML标签和属性（附：前端常见缓存机制跨域性和实际跨域需求总结）

本文总结了前端开发中支持跨域的HTML标签和属性。主要包括：支持跨域请求的标签（img、script、link等）及相关CORS属性；跨域通信方式（postMessage、iframe等）；CORS属性详解及安全注意事项；常见跨域场景示例（图片加载、表单提交等）；以及前端缓存机制在跨域中的限制。文章强调应根据需求选择合适的跨域方案，优先使用CORS等标准化方式，同时注意安全风险控制和浏览器兼容性问题，为开发者提供了全面的跨域解决方案参考。

2026-02-03 10:19:06 945

原创 Vue3 规范推荐的＜script setup＞中书写顺序（附：如何响应路由参数变化）

Vue3在<script setup>中推荐按逻辑顺序组织代码：1)导入语句→2)类型定义→3)Props/Emits→4)响应式数据→5)组合式函数→6)计算属性→7)观察器→8)方法→9)生命周期钩子→10)暴露方法。针对路由参数变化，默认组件不会重新创建但会复用，可通过watch监听route对象或使用key强制刷新。VueRouter4推荐使用onBeforeRouteUpdate钩子处理参数更新，平衡性能与简洁性。现代生态更推荐结合Pinia和Composition API。

2026-02-02 13:35:56 1163

原创 HTTP 请求方法选择与 RESTful 实践（对比 GraphQL、RPC）

HTTP请求方法在实际开发中并非仅使用POST，但确实存在简化使用现象。早期因技术限制（如浏览器表单仅支持GET/POST）和简化思维导致过度使用POST。现代开发推荐RESTful风格：GET查询、POST创建、PUT/PATCH更新、DELETE删除，以提升语义清晰度和利用HTTP原生优势（缓存、幂等性）。特殊场景如GraphQL主要用POST属设计选择。不同API风格对比显示：RESTful适合标准化CRUD，GraphQL适合复杂查询，RPC适合高性能通信。

2026-01-30 15:50:17 881 2

原创名词解释：前端服务器

前端服务器通常指在前端开发或部署中起关键作用的服务端组件，而非运行前端代码的服务器。主要包含三类：1）静态资源服务器（如Nginx、CDN），负责托管分发前端构建文件；2）开发工具链中的本地服务（如Vite、Webpack DevServer），提供热更新和API代理；3）BFF层（如Node.js服务），为前端定制API。需注意前端代码实际在浏览器执行，服务器仅负责代码分发或特定渲染。理解该术语需结合具体场景区分是静态托管、开发工具还是API聚合服务。

2026-01-30 14:50:05 982

原创传统 Web 开发与前后端分离架构的协作模式差异

本文对比分析了传统Web开发与前后端分离架构的协作模式差异。传统模式下，前后端高度耦合，需依次完成需求提出、前端开发、模板转换、前后端对接等线性流程，容易因接口不一致导致多次返工，效率低下且沟通成本高。而前后端分离架构通过先定义接口规范、使用Mock数据实现并行开发、标准化联调流程，显著提升了开发效率。该架构下，前端可独立开发UI和交互逻辑，后端专注业务实现，双方通过API契约解耦，支持灵活部署和自动化测试，是现代Web开发的主流实践。

2026-01-30 14:43:14 1016

原创 web前端开发大事记（开发模式变更，重大转折，以及最新AI技术的影响等，Agent 工程师）

Web前端开发经历了从静态页面到动态交互、工程化、组件化的演进过程。

2026-01-30 14:25:13 692

原创 AI 找 bug 的局限性和 Deepseek 优势明显

本文分析了一个Vue表单组件中数据意外丢失的Bug。问题表现为相同组件在不同页面（login.vue和CreatePost.vue）表现不一致，根本原因是ValidateForm组件在验证通过后自动清空表单的副作用操作导致数据时序问题。通过对比分析、数据流追踪和时序检查，发现组件职责不清是核心问题。最终给出三种解决方案，并总结出组件设计应遵循单一职责、显式控制和避免隐式副作用等重要原则。文章还提供了调试技巧、预防措施和测试策略，强调清晰的接口设计对避免此类Bug的重要性。

2026-01-29 20:39:23 612

原创在计算属性中获取 Vuex 状态是标准做法（附：Vue 3 计算属性详解及和 watch 对比）

Vuex状态管理最佳实践：在计算属性中获取状态摘要： Vuex状态存储在计算属性中获取是最佳实践，主要因为：1) 计算属性具有响应式特性，确保状态变化时组件自动更新；2) 计算结果会被缓存，优化性能；3) 避免在data中直接存储状态导致响应丢失。Vue提供了mapState/mapGetters辅助函数简化代码，同时应通过mutations修改状态。Vue3的Composition API也支持通过computed获取状态。这种方式完美结合了Vue的响应式系统和计算属性优势，是Vuex状态管理的标准做法

2026-01-29 13:37:40 586

原创 Vue 3 缓存策略详解

Vue3缓存策略全面解析：从组件级到响应式系统的优化方案。

2026-01-28 14:24:51 411

原创全局状态管理：Vuex 与 Pinia 对比（附：反模式详解）

Vuex和Pinia是Vue生态中两大主流状态管理工具。Vuex作为Vue2时代的官方解决方案，采用Flux架构，包含State、Getters、Mutations、Actions和Modules五个核心概念，适合大型项目但学习成本较高。Pinia作为Vue3时代的推荐方案，基于CompositionAPI设计，仅保留State、Getters和Actions三个概念，移除了Mutations，代码更简洁直观。

2026-01-28 14:16:26 493

原创 SPA 技术支撑体系详解

本文详细介绍了单页应用(SPA)的技术支撑体系，涵盖核心框架、路由管理、状态管理、构建工具等关键技术。主要内容包括：1)主流前端框架(React/Vue)的SPA实现方案；2)客户端路由管理原理与实现；3)多种状态管理模式对比与最佳实践；4)Webpack/Vite等构建工具配置；5)API通信与数据获取策略；6)性能优化关键技术；7)服务端渲染与静态生成方案；8)PWA与离线能力实现；9)微前端架构支持；10)开发工具与调试支持。

2026-01-28 14:02:58 439

原创 JavaScript 全局状态管理出现的背景和非 SPA 应用不需要全局状态管理的原因

随着前端应用复杂度的提升，JavaScript全局状态管理应运而生。其核心驱动力在于SPA应用兴起带来的组件间状态共享需求，传统方案如全局变量和事件总线难以满足现代开发要求。全局状态管理解决了组件层级过深导致的"prop drilling"问题，提供了可预测的状态变更路径和跨组件通信机制。相比传统多页应用（MPA）通过URL/表单传递状态的方式，SPA需要持久化的全局状态来维持应用级数据一致性。

2026-01-28 13:51:20 636

原创 JavaScript中，什么是函数式编程

JavaScript函数式编程强调使用纯函数、避免副作用和可变数据。核心概念包括：纯函数（相同输入永远相同输出）、不可变性（创建新对象而非修改原对象）、高阶函数（可接收/返回函数）。常用工具如数组的map/filter/reduce方法、柯里化和函数组合。优点是代码更可预测、易测试、可维护，适合数据处理和状态管理。需注意JavaScript并非纯函数式语言，过度使用可能影响性能。建议从基础数组方法开始实践，逐步掌握函数式编程思想。

2026-01-28 09:27:08 571

原创 JavaScript字符串转数字方法总结

本文总结了JavaScript中将字符串转换为数字的7种方法：Number()、parseInt()、parseFloat()、一元加号、按位非双反、乘以1和位或0。详细对比了各方法的转换规则、返回值类型和适用场景，特别说明了处理特殊值(如空字符串、非数字字符)时的行为差异。建议根据需求选择：严格转换用Number()，提取数字用parseInt/parseFloat，简洁代码用一元加号，性能优先用位运算。同时提醒注意不同方法对空字符串的处理差异，并权衡隐式转换方法的可读性问题。

2026-01-28 09:08:53 483

原创 Vue 3 中使用 Vue Router 实现 SPA（单页应用）

SPA（单页应用）是一种现代Web开发模式，通过动态重写当前页面实现交互，无需整页刷新。其核心特点包括客户端路由、前后端分离和组件化开发。相比传统多页应用，SPA具有更流畅的用户体验和更好的性能优化潜力，但也面临SEO和首屏加载的挑战。主流框架如React、Vue和Angular都支持SPA开发，配合路由懒加载、代码分割等技术可进一步提升性能。Vue3中通过VueRouter实现SPA，提供useRouter、useRoute等组合式API，支持编程导航、路由守卫等高级功能。

2026-01-27 15:04:51 875

原创＜AI解读＞刘震云的长篇小说《一句顶一万句》

刘震云的长篇小说《一句顶一万句》是一部深刻探讨人类孤独本质与沟通困境的文学作品，被誉为“中国版的《百年孤独》”，并于2011年荣获茅盾文学奖。

2026-01-27 13:30:13 813

原创 Vue3 中使用的命名规则和实际开发命名规范总结

Vue3命名规范指南摘要本文总结了Vue3开发中的命名规范，分为强制和推荐两种级别。

2026-01-26 00:50:00 643

原创 Vue3中＜slot ＞不支持 ref 属性的替代方案

Vue3中<slot>元素不支持直接使用ref属性，因其并非真实DOM。提供四种替代方案：1）父组件直接获取子组件ref；2）使用作用域插槽传递数据；3）子组件内用ref包裹插槽内容；4）通过$el访问根元素。建议优先采用父组件直接添加ref或作用域插槽方式，保持代码清晰可维护。注意在onMounted后访问ref确保DOM渲染完成，避免过度依赖DOM操作。

2026-01-25 14:54:32 586

原创 Vue 3 中的具名插槽仍然完全支持，Vue 2 的旧语法 Vue 3 中已废弃

Vue3中具名插槽的使用方式更加统一和简洁。新版本采用v-slot指令（简写为#）替代Vue2的slot和slot-scope属性，支持默认插槽、具名插槽和作用域插槽。子组件通过name属性定义插槽，父组件使用#插槽名语法插入内容。Vue3还增强了动态插槽名支持和参数解构功能，废弃了旧语法，使插槽使用更加一致，特别是在TypeScript环境下提供更好的类型推断。

2026-01-25 14:42:32 532

原创 v-model 在 Vue2 和 Vue3 中的实现对比或异同

Vue3对v-model机制进行了优化升级：默认属性名从value改为modelValue，事件名从input变为update:modelValue，并原生支持多v-model绑定（替代Vue2的.sync修饰符）。自定义修饰符处理通过modelModifiers更直观，迁移时需调整prop/事件命名。虽然底层实现变化，但语法保持兼容，使表单绑定更灵活同时确保平滑升级。Vue3的改进包括支持类型检查、多绑定和增强修饰符处理，提升了开发体验。

2026-01-25 14:35:58 649

原创手机SIM卡 4G 5G 信号强度和移动网络 WIFI 之间的关系或区别

华为P60搭载骁龙8+4G芯片，硬件层面不支持5G网络，无法通过维修或更换零件实现5G功能。该机支持4G卡和5GHz WiFi（与5G移动网络无关），信号强度-100dBm时会影响蜂窝数据但WiFi不受影响。移动卡和电信卡的信号格数显示差异源于运营商覆盖策略不同，实际网速应以测速数据为准。建议使用5G通信壳或更换原生5G机型以获得5G体验。WiFi连接建议：近距离高速需求选5GHz频段，远距离稳定连接选2.4GHz频段。测速推荐使用全球网测或Speedtest等专业工具。

2026-01-23 15:32:53 896

原创 JavaScript中，为什么需要手动清理事件

JavaScript中手动清理事件监听器是重要的内存管理实践，主要原因是防止内存泄漏（特别是闭包引用导致）、避免重复绑定、提升性能、防止意外行为。现代开发中可使用AbortController、框架生命周期钩子（如React的useEffect清理函数、Vue的onUnmounted）自动清理。最佳实践包括成对使用add/removeEventListener、使用命名函数、在SPA路由切换和动态元素移除时特别注意清理。通过事件委托和WeakMap等现代工具可以更高效地管理事件监听器。

2026-01-22 17:53:35 378

原创 Vue 3 中移除了 $on、$off 和 $once 方法（附：Composables 组合式函数使用详解）

Vue3移除了$on、$off和$once事件API，推荐使用更现代的替代方案。主要替代方式包括：1)使用mitt等第三方事件库；2)基于provide/inject和响应式状态模拟事件总线；3)采用组合式函数(Composables)共享状态；4)使用Pinia/Vuex状态管理工具；5)父子组件通过props/emits通信。Vue3鼓励使用明确的组件通信模式，如状态管理和组合式API，替代传统事件总线，提升代码可维护性。组合式函数是Vue3的核心特性，支持逻辑复用、类型安全和清晰的作用域。

2026-01-22 00:13:55 593

原创 Window 环境谷歌浏览器使用快捷键打开开发者工具没反应

Chrome开发者工具快捷键失效的解决方案：1.检查快捷键冲突（关闭后台软件/扩展）；2.重置Chrome键盘设置；3.尝试替代快捷键组合；4.通过菜单手动打开；5.检查Fn键功能；6.重置Chrome或使用无痕模式；7.更新/重装Chrome；8.排查系统键盘问题；9.新建系统账户测试。建议按顺序排查，优先检查软件冲突和快捷键设置。

2026-01-22 00:04:22 672

原创 Pinia 使用详解（附：如何查看或区分项目使用的是 Pinia 还是 Vuex 4）

Pinia是Vue3官方推荐的状态管理库，具有轻量(约1kb)、完整的TypeScript支持等特点。安装后需创建Pinia实例并在main.ts中注册，通过defineStore定义store，包含state、getters和actions三部分。在组件中使用storeToRefs保持响应式，支持直接修改状态或通过actions操作。与Vuex4相比，Pinia更轻量、模块化设计更简洁。两者可通过检查package.json、目录结构和使用方式区分，虽可共存但不推荐长期使用。

2026-01-21 23:54:32 714

原创 CSS 新特性总结（附：var() 函数详解）

本文全面总结了CSS最新特性，涵盖选择器、布局、变量、动画等多个方面。重点包括：1）CSS Selectors Level 4新增的关系选择器(:has)、逻辑组合选择器(:is/:where)等；2）布局增强如Flexbox的gap属性、Grid子网格和Masonry布局；3）CSS变量(var())及其作用域、继承特性；4）容器查询、层叠层、嵌套等模块化特性；5）视图过渡、滚动驱动动画等交互效果。文章详细解析了每个特性的语法、应用场景和兼容性情况，并提供了最佳实践建议。

2026-01-21 23:28:19 613

原创 Vue 3 中使用 Mitt 事件总线

Vue3中使用Mitt事件总线实现组件通信。Mitt是一个轻量级的事件库，可作为全局事件总线替代方案。文章介绍了基本使用方法：创建事件总线实例、定义事件类型、在组件中发射和监听事件，并强调组件卸载时需取消监听以避免内存泄漏。还展示了高级用法：工厂模式创建多总线、封装Vue插件、CompositionAPI封装Hook。最后对比了Mitt与Vue原生通信方式的差异，建议谨慎使用事件总线，优先考虑props/emit或provide/inject等更明确的通信方式。

2026-01-21 23:05:49 493