- 博客(21)
- 收藏
- 关注
RSS订阅原创 从装饰者到桥接再到工厂：模式组合的艺术
装饰者就像套娃，每个娃娃外表看起来都一样，但大娃娃里面套着小娃娃。：桥接模式让两个维度"门当户对、平等合作"，而不是一个依附另一个。// 正确的：“目前有3种配料，用简单方案，等真有10种时再重构”有些维度应该平等相处。：设计一个游戏角色系统，有职业（战士、法师）和装备（剑、法杖）传统继承需要：红圆、蓝圆、红方、蓝方 → 4个类。装备不是"装饰"职业，装备可以独立存在。装饰者模式说："别急，我们来玩俄罗斯套娃！// 第二版：发现需要加配料 → 引入装饰者。5种配料（糖、奶、奶油、焦糖、肉桂）
2025-12-02 14:44:53
821
原创 Vue 3 + Element Plus 表单校验
本文系统介绍了ElementPlus表单校验的完整实践指南。从基础概念入手，讲解了表单校验的必要性（减少38%无效请求），详细分析了blur和change两种触发方式的适用场景及性能优化方案。重点阐述了nextTick在企业级应用中的关键作用，提供了包含自定义验证函数的完整代码实现，并针对常见问题给出解决方案。文章强调用户体验优先的设计原则，建议80%字段使用blur验证，同时提供了代码组织规范和扩展思路，帮助开发者从入门到精通掌握表单校验技术，有效提升系统稳定性和用户体验。
2025-11-29 22:45:54
1091
原创 Pinia 持久化插件完全指南：从原理到实战避坑
本文介绍了Pinia状态持久化的解决方案，重点对比了手动管理localStorage与使用pinia-plugin-persistedstate插件的优劣。通过典型代码示例展示了插件如何简化登录状态等数据的持久化管理，详细讲解了选项式和组合式两种API风格的配置方法及适用场景，并提供了常见问题解决方案和最佳实践建议。文章指出该插件能优雅解决Vue应用页面刷新导致状态丢失的问题，是Vue3项目状态管理的推荐方案。
2025-11-17 21:34:32
1115
原创 ES6 Promise：告别回调地狱的异步编程革命
Promise 的出现是 JavaScript 异步编程的重要里程碑。链式调用解决回调嵌套统一错误处理提升代码健壮性状态不可逆保证数据一致性组合能力简化复杂异步流程如今，Promise 已成为现代 JavaScript 开发的基石，与 Async/Await 结合使用，让开发者能够编写出既优雅又强大的异步代码。Promise 不是万能的，但没有 Promise 是万万不能的！
2025-11-08 14:17:18
508
原创 Vue 3 中 nextTick 的妙用：优雅实现页面刷新功能
本文探讨了在Vue3企业级项目中实现优雅的局部刷新功能的解决方案。通过分析常见需求，针对初始方案存在的问题，深入剖析了nextTick的工作原理。最终提出结合Pinia状态管理，利用nextTick确保DOM更新顺序的核心实现方案。文章详细展示了包含防重复刷新、错误处理、智能加载时间等优化的完整代码，并总结了使用v-if控制组件生命周期、状态同步管理等关键技术要点。该方案既满足功能需求，又提供了良好的用户体验，充分展现了Vue3响应式系统的强大特性。
2025-11-05 00:03:43
920
原创 智能体架构深度解析：从入门到精通的六种核心模式
你们完成了一个基础的AI助手(检索(Retrieval)+记忆(Memory)+工具(Tools))的基础智能体功能后，我们意识到，那仅仅是构建智能体系统的起点。为了应对日益复杂的业务场景，我们需要更强大、更灵活的架构模式。本文将系统性地介绍六种主流的智能体架构模型，助您从宏观上把握智能体设计的精髓。这六种模式分别是：增强型智能体链式工作流智能体路由工作流智能体并行工作流智能体协调器工作流智能体评估优化工作流智能体下面，让我们一同深入探讨每种模式的设计思想与应用场景。
2025-10-31 21:44:38
997
原创 深入理解建造者模式：从对象创建到流程组装
当我们谈论创建对象时，关键字是最直接的方式。但当对象的构造过程变得复杂、冗长时，代码的可读性、可维护性就会急剧下降。设计模式中的建造者模式正是为了解决“复杂对象的创建”这一痛点而诞生的。建造者模式的核心思想只有四个字：分离与组装。分离：将一个复杂对象的构建过程与其最终表示分离开来。组装：通过一个固定的指挥流程，将简单的部件一步步组装成复杂的产品。这就像搭乐高：你有一堆积木部件（），一张设计图纸（），最终目标是搭出一个城堡（）。建造者模式就是规定了如何用图纸指挥你，将积木搭成城堡的过程。建造者模式通常包含以下
2025-10-28 17:13:27
809
原创 设计模式深度解析：从简单工厂到抽象工厂，彻底搞懂工厂模式家族
工厂方法模式将具体产品的创建延迟到工厂子类中进行。当需要增加一种新产品时，我们只需要：新增一个该产品对应的具体产品类。新增一个该产品对应的具体工厂类。
2025-10-28 11:48:14
1020
原创 设计原则与模式全景指南：后端开发的必修内功
本文系统解析了后端开发中的六大设计原则及其应用。开闭原则、依赖倒置、里氏替换等原则构成了高质量代码的基础，23种设计模式则是这些原则的具体实现。文章通过真实代码反例、原则图谱、模式分类等方式，阐明如何运用设计原则提升代码的可维护性、扩展性和可靠性。特别针对MVC架构、微服务和数据库访问层等场景，提供了原则应用的具体建议，并给出学习路径和决策工具，帮助开发者在实际项目中合理运用设计模式，避免过度设计。
2025-10-21 09:58:55
612
原创 深入理解 Vue3 自定义 Ref：使用 customRef 实现精细化响应式控制
customRef是 Vue3 提供的一个高级 API，它允许开发者创建自定义的响应式引用，并对其依赖追踪和更新触发进行精细化的逻辑控制。与普通的ref相比，customRef赋予了我们对响应式过程更底层的控制能力。情况track()trigger()结果适用场景正常使用√√完整的响应式大多数情况省略 track❌√数据变但界面不更新几乎不用省略 trigger√❌依赖追踪但无更新手动控制更新两者都省略❌❌完全非响应式不应该使用customRef精细控制。
2025-10-12 16:07:10
524
原创 Pinia 进阶实战：storeToRefs、Getters 与响应式监听深度解析
count: 0,})// 转换所有属性，包括方法（如果有的话）// 只转换 state 和 getters，忽略 actions！方面toRefs转换目标普通响应式对象Pinia Store 实例转换内容所有属性仅 state 和 gettersActions 处理会转换（但没必要）智能忽略使用场景组件内 reactive 对象Pinia Store 解构设计意图：在保持响应式的前提下，提供更好的开发体验解决直接解构的响应式丢失问题智能区分状态和方法，避免不必要的转换。
2025-10-07 19:48:43
710
原创 从 Vue Router 到 Pinia：现代 Vue 状态管理入门指南
Pinia 是 Vue 官方推荐的下一代状态管理库，可以看作是Vuex 5的正式实现。它专为 Vue 3 和组合式 API 设计。// 定义并导出 store// 状态 - 相当于组件的 datareturn {sum: 6,school: 'Vue3 实战学院',history: [] as number[] // 操作历史记录},// 计算属性 - 相当于组件的 computedgetters: {// 基于 state 的计算// 使用 this 访问整个 store。
2025-10-07 18:52:23
886
原创 Vue Router 进阶指南：路由传参与编程式导航实战详解
Query参数是URL中?后面的键值对，多个参数用textid=1001&title=今日头条&from=hometexthttps://example.com/article/1001/今日头条path: '/article/:id/:title', // 使用冒号定义参数占位meta: {title: '文章详情'场景推荐方案理由搜索筛选Query参数URL可分享，参数可选详情页面URL美观，类型安全复杂业务Props函数灵活处理，逻辑清晰临时数据Query参数无需路由配置重要操作。
2025-10-07 14:34:43
1287
原创 Vue Router 从入门到实战：路由基础与嵌套路由详解
通过本章学习，你已经掌握了 Vue Router 的核心概念和基础用法。前面讲了单个组件页面，我们接下来想象一下传统网站：点击导航菜单，浏览器刷新整个页面，等待加载... 这种体验在如今已经过时了。当 URL 变化时，自动切换显示对应的组件，无需刷新页面。对于新手或快速原型开发，Hash模式可以避免部署时的各种路径问题。：Vue 3 路由采用函数式创建，更符合组合式API的设计理念。会自动在激活的链接上添加样式，便于用户识别当前页面。：使用 History 模式，体验更好。count 数据被重置为 0。
2025-10-06 23:48:50
1131
原创 Spring AI 的两大智能引擎：RAG 与 Tools 深度解析
大模型基于 Tool 执行的结果，组织自然语言并最终回复给用户。整个过程可能涉及多次 Tool 调用。
2025-10-06 18:04:42
855
原创 Vue 生命周期深度解析：从 Vue 2 到 Vue 3 的设计演进
关注点分离→逻辑关注点聚合时间轴驱动→逻辑功能驱动配置化编程→组合式编程概念复杂性→模型简化。
2025-10-02 23:52:00
806
原创 Vue 3 的 ref：为什么一个函数身兼两职？
refVue3 的 ref 设计是为了：更好的 TypeScript 支持更一致的响应式体验摆脱this的依赖代价是：初学者需要适应期同一个名字承担了双重含义但一旦习惯后，你会发现这种统一性在复杂组件中反而更有优势。就像学开车，刚开始觉得手动挡麻烦，熟练后就享受那种精准控制的感觉了！Vue3 让ref身兼两职，可以理解为一种概念上的统一。它用初期的学习成本，换来了更好的类型支持、更灵活的代码组织和更一致的开发体验。就像从自动挡换到手动挡，开始可能觉得麻烦，但熟练后你会享受那种精准控制的快感。
2025-10-01 17:32:14
909
原创 Vue3 响应式原理深度解析：为什么你会失去响应式及如何规避
丢失类型ref 影响reactive 影响根本原因引用断裂高风险高风险响应式包装器被替换值拷贝高风险不影响解构产生值副本嵌套替换不影响高风险新对象未经过代理特定操作不影响中等风险Proxy 拦截限制// 创建具有防御性的 reactivereturn {state,update,setNested// 使用user: { name: '张三' },})= 解决解构丢失问题，必用场景。ref包裹对象时，让你能方便地解构字段，用在模板或组合式 API 时更直观。
2025-09-30 10:16:37
1206
原创 为什么 Vue 3 的 Ref 响应式变量需要 .value？
别急，这个设计不是 Vue 团队故意要增加你的打字量，而是为了解决 JavaScript 一个根本性的限制，并带来巨大的灵活性。在 JavaScript 中，对象的属性访问是可以被拦截的。：无论你处理的是字符串、数字，还是一个复杂的对象，只要是用。这是一个非常贴心的语法糖，让你在模板中书写起来更符合直觉。它确保了无论数据类型如何，你都能拥有完美的响应式体验。，首先要明白 JavaScript 中变量的传递方式。因为对象本身就可以被代理，不需要额外的“盒子”。时，我们不再直接赋值，而是去修改这个盒子里的。
2025-09-27 16:16:20
710
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人