<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[青蛙king的博客]]></title><description><![CDATA[走在前端的路上……]]></description><link>https://blog.youkuaiyun.com/mChales_Liu</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; mChales_Liu]]></copyright><item><title><![CDATA[理解 React children 与 Vue slot]]></title><link>https://blog.youkuaiyun.com/mChales_Liu/article/details/154872435</link><guid>https://blog.youkuaiyun.com/mChales_Liu/article/details/154872435</guid><author>mChales_Liu</author><pubDate>Sat, 17 Oct 2026 15:41:08 +0800</pubDate><description><![CDATA[React 的 children 与 Vue 的 slot 均实现组件内容分发，核心思想一致：父组件提供内容，子组件决定渲染位置。主要区别在于：Vue 采用专门的 <slot> 语法，语义清晰；React 则通过 children 和函数式 Props（Render Props）实现，更灵活、贴近 JavaScript 本质。两者各具优势，体现不同框架的设计哲学——Vue 偏模板声明，React 重逻辑组合。]]></description><category></category></item><item><title><![CDATA[React 系统的梳理]]></title><link>https://blog.youkuaiyun.com/mChales_Liu/article/details/160810349</link><guid>https://blog.youkuaiyun.com/mChales_Liu/article/details/160810349</guid><author>mChales_Liu</author><pubDate>Wed, 06 May 2026 09:34:17 +0800</pubDate><description><![CDATA[本文对比 React 与 Vue 的设计理念，指出 React 为灵活但依赖生态的 UI 渲染库，而 Vue 是集成响应式、模板、状态管理等的一体化框架。文章梳理了 React 的核心概念、组件模型、Hooks 用法、状态管理及性能优化，并推荐以“组件→Hooks→设计思想→状态架构→性能优化”为学习路径，强调 React 更像一套思维模型与技术生态体系。]]></description><category></category></item><item><title><![CDATA[git 安装教程]]></title><link>https://blog.youkuaiyun.com/mChales_Liu/article/details/158837858</link><guid>https://blog.youkuaiyun.com/mChales_Liu/article/details/158837858</guid><author>mChales_Liu</author><pubDate>Mon, 09 Mar 2026 09:42:18 +0800</pubDate><description><![CDATA[本文提供了Git在不同操作系统下的安装指南。Windows用户可通过官网下载.exe文件安装，MacOS推荐使用Homebrew安装，Linux用户可使用系统包管理器（如apt/dnf/yum）安装。安装后需配置用户名和邮箱，并通过git --version验证安装。常见问题包括PATH设置错误导致命令未找到，建议重启终端解决。安装完成后即可使用Git进行版本控制操作。]]></description><category></category></item><item><title><![CDATA[React 常用的 API]]></title><link>https://blog.youkuaiyun.com/mChales_Liu/article/details/158658635</link><guid>https://blog.youkuaiyun.com/mChales_Liu/article/details/158658635</guid><author>mChales_Liu</author><pubDate>Wed, 04 Mar 2026 17:10:46 +0800</pubDate><description><![CDATA[本文系统介绍了React Hooks的核心用法与优化技巧。主要涵盖useState状态管理、useEffect副作用处理、useContext上下文共享、useRef DOM操作等基础Hook，以及useMemo/useCallback性能优化、useReducer复杂状态管理等进阶Hook。重点解析了各Hook的使用场景、实现原理和最佳实践，如useState的惰性初始化、useEffect的清理机制、useMemo的缓存优化等。同时对比了React.memo与PureComponent的性能优化方式，为]]></description><category></category></item><item><title><![CDATA[Vue2 与 Vue3 的区别]]></title><link>https://blog.youkuaiyun.com/mChales_Liu/article/details/158543417</link><guid>https://blog.youkuaiyun.com/mChales_Liu/article/details/158543417</guid><author>mChales_Liu</author><pubDate>Sun, 01 Mar 2026 22:25:21 +0800</pubDate><description><![CDATA[Vue 3相比Vue 2在性能、功能和开发体验方面有显著提升。主要改进包括：采用Proxy重构响应式系统，提升性能；引入Composition API增强代码组织和复用性；原生支持TypeScript；新增Fragments和Teleport等特性优化DOM操作；重写虚拟DOM提高渲染效率。此外，Vue 3在生命周期钩子、自定义事件和依赖注入等方面也有所改进。这些变化使Vue 3更适合大型应用开发，在性能、灵活性和可维护性上全面超越Vue 2。对于新项目推荐直接使用Vue 3，现有项目也可考虑逐步迁移。]]></description><category></category></item><item><title><![CDATA[Vue 性能优化]]></title><link>https://blog.youkuaiyun.com/mChales_Liu/article/details/158423585</link><guid>https://blog.youkuaiyun.com/mChales_Liu/article/details/158423585</guid><author>mChales_Liu</author><pubDate>Fri, 27 Feb 2026 20:05:51 +0800</pubDate><description><![CDATA[Vue性能优化指南 本文系统总结了Vue性能优化的核心思路和具体实践方法。主要从以下几个方面进行优化： 代码层面优化：正确使用v-if/v-show、合理设置key值 减少组件渲染：拆解组件、避免父组件无意义更新、使用computed缓存 v-for优化：避免v-for与v-if混用、长列表使用虚拟滚动 内置指令优化：v-once、v-memo和keep-alive的使用场景 核心优化原则是减少effect执行次数和缩小diff范围，通过合理的组件拆分、缓存机制和虚拟滚动等技术手段，可显著提升Vue应用的性]]></description><category></category></item><item><title><![CDATA[Vue3 的状态管理]]></title><link>https://blog.youkuaiyun.com/mChales_Liu/article/details/157912828</link><guid>https://blog.youkuaiyun.com/mChales_Liu/article/details/157912828</guid><author>mChales_Liu</author><pubDate>Wed, 11 Feb 2026 00:11:04 +0800</pubDate><description><![CDATA[Vue状态管理采用分层设计：组件局部状态（ref/reactive）、组件通信状态（props/emit、provide/inject）和全局状态（Pinia）。Pinia作为Vue官方推荐的状态管理方案，具有类型支持、模块化和DevTools集成等优势，适合中大型项目。对于小型应用，可使用组合式API+单例状态；大型系统可结合领域拆分、持久化插件和微前端架构。Event Bus（如mitt）仅适用于事件通知而非状态管理，应与Pinia配合使用。技术选型建议：小工具用reactive单例，常规业务用Pini]]></description><category></category></item><item><title><![CDATA[vue3 系统的梳理]]></title><link>https://blog.youkuaiyun.com/mChales_Liu/article/details/157871237</link><guid>https://blog.youkuaiyun.com/mChales_Liu/article/details/157871237</guid><author>mChales_Liu</author><pubDate>Mon, 09 Feb 2026 20:51:09 +0800</pubDate><description><![CDATA[本文是Vue3技术研究合集，包含项目创建、语法特性、组件开发和核心API等内容。重点介绍Vue3的模板语法、组件通信、生命周期、响应式系统等核心概念，同时对比Vue2的差异。文章通过系列教程链接详细讲解Vue3的指令系统、渲染机制、动态样式等特性，适合想系统学习Vue3的开发者参考。部分内容涉及Vue2但不深入讨论，提供相关学习链接供读者延伸阅读。]]></description><category></category></item><item><title><![CDATA[Vue 实例详解]]></title><link>https://blog.youkuaiyun.com/mChales_Liu/article/details/157910733</link><guid>https://blog.youkuaiyun.com/mChales_Liu/article/details/157910733</guid><author>mChales_Liu</author><pubDate>Mon, 09 Feb 2026 20:49:40 +0800</pubDate><description><![CDATA[Vue实例创建的本质是启动一个完整的UI运行时系统，包括组件实例、响应式作用域、渲染副作用和生命周期调度。Vue3通过createApp创建应用实例后，mount阶段才会真正启动渲染。核心流程包括：创建组件实例对象（内存形态）、初始化组件内容（处理Options API或Composition API）、建立响应式渲染副作用（实现自动更新机制）。整个过程创建了5个核心系统：组件实例对象、响应式状态系统、渲染函数、渲染副作用effect和生命周期调度器。Vue实例实质上是一个能自动追踪依赖并触发UI更新的智能]]></description><category></category></item><item><title><![CDATA[Vue 组件的生命周期]]></title><link>https://blog.youkuaiyun.com/mChales_Liu/article/details/157909691</link><guid>https://blog.youkuaiyun.com/mChales_Liu/article/details/157909691</guid><author>mChales_Liu</author><pubDate>Mon, 09 Feb 2026 18:55:56 +0800</pubDate><description><![CDATA[Vue2与Vue3生命周期对比摘要：Vue3在Options API中保留了Vue2的生命周期概念，但命名更语义化（如beforeDestroy改为beforeUnmount），并新增调试钩子renderTracked/renderTriggered。Composition API通过setup()函数取代beforeCreate/created阶段，以onMounted等函数形式注册生命周期，支持逻辑复用且不依赖this。Vue3的生命周期设计更符合组合式思想，提供更好的类型推导支持，同时保持与Optio]]></description><category></category></item><item><title><![CDATA[Vue3 渲染调度机制（异步更新）]]></title><link>https://blog.youkuaiyun.com/mChales_Liu/article/details/157904662</link><guid>https://blog.youkuaiyun.com/mChales_Liu/article/details/157904662</guid><author>mChales_Liu</author><pubDate>Mon, 09 Feb 2026 14:34:16 +0800</pubDate><description><![CDATA[Vue3的渲染调度机制通过队列化和异步批处理优化了组件更新性能。核心机制包括：1) 使用队列存储更新任务并进行去重；2) 通过微任务异步执行批量更新；3) 维护pre和post两类副作用队列控制执行时机；4) 按组件创建顺序排序确保父子组件更新顺序正确。该机制解决了频繁重渲染、更新顺序错乱等问题，同时nextTick本质是等待当前批处理完成的微任务。整个流程为：数据变更→入队→微任务触发→执行pre队列→组件更新→执行post队列，实现高效且可预测的UI更新。]]></description><category></category></item><item><title><![CDATA[Vue3 的组件运行机制]]></title><link>https://blog.youkuaiyun.com/mChales_Liu/article/details/157901715</link><guid>https://blog.youkuaiyun.com/mChales_Liu/article/details/157901715</guid><author>mChales_Liu</author><pubDate>Mon, 09 Feb 2026 11:42:55 +0800</pubDate><description><![CDATA[Vue3 组件运行机制解析：从创建到销毁的完整生命周期 Vue3 组件运行机制是一个完整的闭环流程，包含组件从创建到销毁的全过程。核心流程为：创建组件实例 → 初始化props/slots → 执行setup() → 建立响应式effect → 首次render挂载 → 响应式数据变化触发更新 → 重新render → 最终卸载。 关键机制在于：1）通过effect将组件变为响应式副作用；2）数据变化触发trigger，调度器批量更新；3）patch阶段采用虚拟DOM Diff算法高效更新UI，包括组件递归]]></description><category></category></item><item><title><![CDATA[Vue 渲染体系“三件套”（template 模板语法、h 函数和 JSX 语法）]]></title><link>https://blog.youkuaiyun.com/mChales_Liu/article/details/157875216</link><guid>https://blog.youkuaiyun.com/mChales_Liu/article/details/157875216</guid><author>mChales_Liu</author><pubDate>Sun, 08 Feb 2026 20:10:29 +0800</pubDate><description><![CDATA[摘要：Vue提供了三种创建VNode的方式：模板语法(template)、h()函数和JSX。模板语法最易用，通过指令系统实现声明式开发；h()函数是底层API，直接生成虚拟DOM；JSX则结合了模板的直观和JS的灵活性。三者最终都会编译为h()函数生成的VNode，再通过patch过程更新真实DOM。模板适合业务开发，h()适合底层控制，JSX适合复杂逻辑场景，但核心渲染机制完全相同。开发者可根据需求选择最适合的写法。]]></description><category></category></item><item><title><![CDATA[Vue 组件的更新过程（编译系统 + 响应式系统 + 虚拟 DOM & Diff）]]></title><link>https://blog.youkuaiyun.com/mChales_Liu/article/details/157871486</link><guid>https://blog.youkuaiyun.com/mChales_Liu/article/details/157871486</guid><author>mChales_Liu</author><pubDate>Sun, 08 Feb 2026 19:03:01 +0800</pubDate><description><![CDATA[摘要： Vue 的核心工作机制由编译系统、响应式系统和虚拟 DOM 协同完成。编译系统将模板转换为高效渲染函数，通过静态提升、PatchFlag 和 Block Tree 优化性能；响应式系统基于 Proxy 实现依赖收集和变更通知，确保数据变化时精准触发更新；虚拟 DOM 结合 Diff 算法最小化 DOM 操作。三者形成完整工作流：模板编译 → 依赖追踪 → 生成新虚拟 DOM → Diff 对比 → 更新真实 DOM，共同实现 Vue 的高效渲染。]]></description><category></category></item><item><title><![CDATA[“前端路由”知多少？]]></title><link>https://blog.youkuaiyun.com/mChales_Liu/article/details/157766649</link><guid>https://blog.youkuaiyun.com/mChales_Liu/article/details/157766649</guid><author>mChales_Liu</author><pubDate>Thu, 05 Feb 2026 13:08:19 +0800</pubDate><description><![CDATA[本文系统介绍了前端路由的核心概念与实现原理。前端路由通过监听URL变化实现无刷新页面切换，主要包括Hash和History两种模式：Hash路由利用hashchange事件实现，兼容性好但SEO差；History路由基于HTML5 History API，需要后端配合但更符合真实路径。文章详细对比了两者的差异，并剖析了Vue Router/React Router如何封装这两种模式，包括路由匹配、组件渲染和链接拦截等核心机制。最后给出了不同场景下的路由选型建议，为单页应用开发提供了实用的技术参考。]]></description><category></category></item><item><title><![CDATA[深入浅出 WebSocket 协议]]></title><link>https://blog.youkuaiyun.com/mChales_Liu/article/details/156829592</link><guid>https://blog.youkuaiyun.com/mChales_Liu/article/details/156829592</guid><author>mChales_Liu</author><pubDate>Sun, 11 Jan 2026 16:29:16 +0800</pubDate><description><![CDATA[WebSocket是一种基于HTTP握手建立的全双工TCP协议，主要用于实现实时交互通信。其生命周期包括连接、打开、关闭和关闭完成四个状态。核心流程是：通过HTTP升级请求建立连接后，切换为WebSocket协议进行二进制帧通信，支持Ping/Pong心跳机制维持连接，最终通过Close帧优雅关闭。与HTTP相比，WebSocket具有长连接、有状态和全双工等优势。前端实现需关注自动重连、心跳检测、消息可靠性等工程化问题，并与业务逻辑解耦。]]></description><category></category></item><item><title><![CDATA[TS 类型“体操”]]></title><link>https://blog.youkuaiyun.com/mChales_Liu/article/details/156600790</link><guid>https://blog.youkuaiyun.com/mChales_Liu/article/details/156600790</guid><author>mChales_Liu</author><pubDate>Tue, 06 Jan 2026 15:50:37 +0800</pubDate><description><![CDATA[本文总结了TypeScript类型体操的核心概念与技巧，将类型系统比作函数式编程环境。主要内容包括： 类型体操本质：在类型系统中进行函数式编程，将JS值转换为类型，函数转为条件类型，递归函数转为递归类型等。 类型结构与运算原语：介绍了Tuple/Object/Union/String等数据结构及其操作符，如extends/infer/keyof等，强调类型体操是&quot;操作类型数据结构&quot;。 思维与算法模型：提出五大核心操作能力，包括递归处理、条件分支、映射转换、类型推断和联合类型操作，这些能力]]></description><category></category></item><item><title><![CDATA[Monorepo 单仓库管理]]></title><link>https://blog.youkuaiyun.com/mChales_Liu/article/details/156576688</link><guid>https://blog.youkuaiyun.com/mChales_Liu/article/details/156576688</guid><author>mChales_Liu</author><pubDate>Sun, 04 Jan 2026 22:38:34 +0800</pubDate><description><![CDATA[前端Monorepo工程化实践指南 本文深入探讨了前端Monorepo的核心概念与实践方法，指出真正的Monorepo不仅是代码集中管理，更是一个包含统一依赖、强包边界、增量构建等六大核心能力的完整工程系统。文章详细分析了Workspace管理、包边界治理、增量构建系统、独立发布体系等关键技术点，并提供了一个基于pnpm+Turborepo+Changesets的企业级实践方案。 核心要点包括： Monorepo需要解决协作与规模问题，而非简单代码集中 六大核心能力构建完整的工程系统 pnpm Worksp]]></description><category></category></item><item><title><![CDATA[动态表单设计解析]]></title><link>https://blog.youkuaiyun.com/mChales_Liu/article/details/156488313</link><guid>https://blog.youkuaiyun.com/mChales_Liu/article/details/156488313</guid><author>mChales_Liu</author><pubDate>Thu, 01 Jan 2026 17:54:12 +0800</pubDate><description><![CDATA[动态表单体系架构解析 动态表单体系是一种由Schema驱动、Engine运行、Renderer渲染的规则执行系统，其本质是&quot;规则→状态→决策→表现&quot;的过程。相比传统UI框架表单，动态表单体系具有更高抽象层级和更强扩展性，能够解决复杂表单场景下的维护性、复用性和动态性问题。 核心架构分为三层： Schema层：定义字段结构、校验规则和联动关系，遵循可序列化、UI无关原则 Engine层：负责状态管理、校验裁决和联动执行，是规则的实际执行者 Renderer层：将Schema转化为具体UI展]]></description><category></category></item><item><title><![CDATA[知识库分享业务]]></title><link>https://blog.youkuaiyun.com/mChales_Liu/article/details/156481229</link><guid>https://blog.youkuaiyun.com/mChales_Liu/article/details/156481229</guid><author>mChales_Liu</author><pubDate>Thu, 01 Jan 2026 13:26:02 +0800</pubDate><description><![CDATA[摘要：前端分享功能的设计与实现 本文系统阐述了前端分享功能的本质和实现方案。分享不仅是生成链接，而是完整的权限管理体系，包含内容、身份、权限、范围、时间和风险六个维度。文章详细分析了分享业务的分类方式（按对象、内容、权限），并提出了核心模型：分享实体模型（独立授权记录）和访问模型（权限校验流程）。前端在分享流程中承担9大职责，从权限校验到风控限制。重点介绍了分享面板的实现细节，包括二维码生成与权限控制的实时同步。企业级系统需确保权限修改立即生效，撤销后所有访问方式即时失效。文章强调前端是权限体验的第一道防线]]></description><category></category></item></channel></rss>