<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[chaosweet的博客]]></title><description><![CDATA[真正的知识必须体现在行动上，只有做到知行合一，才能真正掌握知识。]]></description><link>https://blog.csdn.net/chaosweet</link><language>zh-cn</language><generator>https://blog.csdn.net/</generator><copyright><![CDATA[Copyright &copy; chaosweet]]></copyright><item><title><![CDATA[Vue 状态管理选型：Pinia 完整实战，对比 Vuex，模块化持久化]]></title><link>https://blog.csdn.net/chaosweet/article/details/163505439</link><guid>https://blog.csdn.net/chaosweet/article/details/163505439</guid><author>chaosweet</author><pubDate>Wed, 05 Aug 2026 14:48:25 +0800</pubDate><description><![CDATA[Hi，我是前端人类学！Vue3 项目中 Pinia 已替代 Vuex 成为主流状态管理方案。本文结合实战案例，对比二者差异，剖析状态管理核心痛点，讲解模块化与数据持久化的最佳实践。]]></description><category></category></item><item><title><![CDATA[Hooks 底层原理：useStateuseEffect 闭包陷阱完整解决方案]]></title><link>https://blog.csdn.net/chaosweet/article/details/163505273</link><guid>https://blog.csdn.net/chaosweet/article/details/163505273</guid><author>chaosweet</author><pubDate>Wed, 05 Aug 2026 14:43:04 +0800</pubDate><description><![CDATA[Hi，我是前端人类学！React Hooks 革新了函数组件开发，但闭包陷阱经常引发 state 过期等各类诡异问题。本文深挖 Hooks 底层，解析闭包陷阱形成原因，给出一套完整解决思路。]]></description><category></category></item><item><title><![CDATA[Vue 路由进阶：路由守卫权限控制、动态路由、懒加载、路由缓存]]></title><link>https://blog.csdn.net/chaosweet/article/details/163473181</link><guid>https://blog.csdn.net/chaosweet/article/details/163473181</guid><author>chaosweet</author><pubDate>Tue, 04 Aug 2026 14:47:50 +0800</pubDate><description><![CDATA[Hi，我是前端人类学！大型 Vue 项目里 Vue Router 不只是页面跳转，还需要搭建完整访问体系。本文从路由守卫权限、动态路由、懒加载、路由缓存，讲解 Vue Router 进阶实战。]]></description><category></category></item><item><title><![CDATA[Vue3 defineProps/defineEmits、v-model 底层原理与踩坑]]></title><link>https://blog.csdn.net/chaosweet/article/details/163472476</link><guid>https://blog.csdn.net/chaosweet/article/details/163472476</guid><author>chaosweet</author><pubDate>Tue, 04 Aug 2026 14:12:16 +0800</pubDate><description><![CDATA[Hi，我是前端人类学！Vue3 script setup 里 defineProps、defineEmits、defineModel 高频常用，不少开发者不了解其底层机制。本文解析这类编译宏的工作原理，同时整理开发常见陷阱与问题。]]></description><category></category></item><item><title><![CDATA[Vue 大型页面性能优化：四个核心策略]]></title><link>https://blog.csdn.net/chaosweet/article/details/163471971</link><guid>https://blog.csdn.net/chaosweet/article/details/163471971</guid><author>chaosweet</author><pubDate>Tue, 04 Aug 2026 13:55:02 +0800</pubDate><description><![CDATA[Hi，我是前端人类学！大型 Vue 应用极易出现页面卡顿。本文从虚拟滚动、按需加载、组件缓存、减少无效渲染四大方向，分享大型页面整套性能优化方案。]]></description><category></category></item><item><title><![CDATA[Vue3 组合式 API 最佳实践：hooks 封装、业务逻辑抽离、代码复用方案]]></title><link>https://blog.csdn.net/chaosweet/article/details/163442253</link><guid>https://blog.csdn.net/chaosweet/article/details/163442253</guid><author>chaosweet</author><pubDate>Mon, 03 Aug 2026 14:37:17 +0800</pubDate><description><![CDATA[Hi，我是前端人类学！Vue3 组合式 API 革新代码组织，解决 Vue2 逻辑复用的命名冲突、溯源难题，实现代码按功能聚合。本文结合实战，讲解 Hook 封装准则、业务抽离思路与代码复用方案。]]></description><category></category></item><item><title><![CDATA[Vue3 响应式原理深析：Proxy 源码拆解、ref/reactive 区别与依赖收集完整流程]]></title><link>https://blog.csdn.net/chaosweet/article/details/163441373</link><guid>https://blog.csdn.net/chaosweet/article/details/163441373</guid><author>chaosweet</author><pubDate>Mon, 03 Aug 2026 14:25:31 +0800</pubDate><description><![CDATA[Hi，我是前端人类学！Vue3 用 Proxy 重构响应式，弥补 Vue2 defineProperty 缺陷。本文从源码拆解响应式内核，区分 ref 与 reactive，梳理依赖收集到派发更新完整流程。]]></description><category></category></item><item><title><![CDATA[Canvas 三合一实战：手写画板、签名与粒子特效完整指南]]></title><link>https://blog.csdn.net/chaosweet/article/details/163367930</link><guid>https://blog.csdn.net/chaosweet/article/details/163367930</guid><author>chaosweet</author><pubDate>Fri, 31 Jul 2026 15:02:47 +0800</pubDate><description><![CDATA[Hi，我是前端人类学！Canvas 是 HTML5 可玩性极高的画布元素，依托 JS 可自由绘制图形。本文从零实现三大实用案例：支持鼠标与触屏的手写画板、可导出图片的签名板、粒子特效，三份完整代码，开箱即用。]]></description><category></category></item><item><title><![CDATA[ECharts 复杂图表封装：多图表联动、自适应、大数据渲染优化]]></title><link>https://blog.csdn.net/chaosweet/article/details/163338390</link><guid>https://blog.csdn.net/chaosweet/article/details/163338390</guid><author>chaosweet</author><pubDate>Thu, 30 Jul 2026 16:16:52 +0800</pubDate><description><![CDATA[Hi，我是前端人类学！ECharts 可视化开发常遇图表联动、自适应、大数据卡顿难题。本文讲解复杂图表封装方案，分享联动、自适应与渲染优化思路]]></description><category></category></item><item><title><![CDATA[原子化 CSS 深度解析：Tailwind 原理、自定义配置、大型项目利弊]]></title><link>https://blog.csdn.net/chaosweet/article/details/163337633</link><guid>https://blog.csdn.net/chaosweet/article/details/163337633</guid><author>chaosweet</author><pubDate>Thu, 30 Jul 2026 15:52:25 +0800</pubDate><description><![CDATA[Hi，我是前端人类学！Tailwind CSS 不止是 CSS 框架，更是开发范式变革。自 2017 年问世后广受关注，但其优劣争议持续不断。本文剖析三大核心问题：Tailwind 底层原理、自定义配置、大型项目里利弊权衡。]]></description><category></category></item><item><title><![CDATA[暗黑模式一键切换完整方案（CSS 变量 + 本地存储）]]></title><link>https://blog.csdn.net/chaosweet/article/details/163337226</link><guid>https://blog.csdn.net/chaosweet/article/details/163337226</guid><author>chaosweet</author><pubDate>Thu, 30 Jul 2026 15:20:18 +0800</pubDate><description><![CDATA[Hi，我是前端人类学！暗黑模式已是现代 Web 刚需，护眼、省电且提升沉浸感。本文搭建生产级切换方案：CSS 变量管控主题色，JS 实现切换，localStorage 持久存储用户偏好]]></description><category></category></item><item><title><![CDATA[手写通用 UI 组件样式：弹窗、下拉、树形、表格纯 CSS 实现]]></title><link>https://blog.csdn.net/chaosweet/article/details/163306308</link><guid>https://blog.csdn.net/chaosweet/article/details/163306308</guid><author>chaosweet</author><pubDate>Wed, 29 Jul 2026 15:20:03 +0800</pubDate><description><![CDATA[Hi，我是前端人类学！组件库已是前端开发标配，Vant、Ant Design 等虽便捷，但易引发包体积过大、样式定制繁琐等问题。本文纯 CSS 实现弹窗、下拉菜单、树形控件、数据表格四大高频组件，无需 JS 即可完成布局与交互。]]></description><category></category></item><item><title><![CDATA[复杂动画性能优化：transformopacity 开启 GPU 加速，避免卡顿]]></title><link>https://blog.csdn.net/chaosweet/article/details/163305740</link><guid>https://blog.csdn.net/chaosweet/article/details/163305740</guid><author>chaosweet</author><pubDate>Wed, 29 Jul 2026 15:05:00 +0800</pubDate><description><![CDATA[Hi，我是前端人类学！网页动画流畅度关乎体验，卡顿易流失用户，移动端受硬件限制问题更为突出，很难维持 60fps。本文基于浏览器渲染原理，解析 transform、opacity 作为动画优化优选属性的原因，并提供全套性能优化方案。]]></description><category></category></item><item><title><![CDATA[移动端适配全方案：从基础原理到响应式组件库设计]]></title><link>https://blog.csdn.net/chaosweet/article/details/163304057</link><guid>https://blog.csdn.net/chaosweet/article/details/163304057</guid><author>chaosweet</author><pubDate>Wed, 29 Jul 2026 14:38:26 +0800</pubDate><description><![CDATA[Hi，我是前端人类学！移动端适配是前端必备能力。不同设备屏幕尺寸、像素密度差异较大，需一套代码保障多端视觉与体验。本文从视口原理入手，梳理 rem、vw/vh、媒体查询等适配方案，探讨如何基于这些方案搭建响应式组件库。]]></description><category></category></item><item><title><![CDATA[CSS 现代新特性落地实战：变量、容器查询、:has() 组合拳]]></title><link>https://blog.csdn.net/chaosweet/article/details/163274128</link><guid>https://blog.csdn.net/chaosweet/article/details/163274128</guid><author>chaosweet</author><pubDate>Tue, 28 Jul 2026 14:52:44 +0800</pubDate><description><![CDATA[Hi，我是前端人类学！曾经依赖 JS 与复杂类名实现的效果，如今几行 CSS 就能搞定。容器查询搭配:has () 打造灵活响应式，CSS 变量轻松实现主题化。不谈理论，直击实战，看三大特性联手攻克前端布局难题。]]></description><category></category></item><item><title><![CDATA[CSS 现代布局终极方案：Grid 完整实战，替代浮动/弹性布局复杂场景]]></title><link>https://blog.csdn.net/chaosweet/article/details/163272758</link><guid>https://blog.csdn.net/chaosweet/article/details/163272758</guid><author>chaosweet</author><pubDate>Tue, 28 Jul 2026 14:18:34 +0800</pubDate><description><![CDATA[Hi，我是前端人类学！从圣杯布局到卡片墙，Grid 重塑 Web 布局思路。若你还在靠 float 清浮动、margin 调间距、多层 flex 拼凑网格，不妨看看本文。CSS Grid 并非内卷工具，而是专治各类勉强能用、难以维护的布局痛点。]]></description><category></category></item><item><title><![CDATA[手写核心工具库：防抖节流、发布订阅、Promise、简易路由、简易 Vue 响应式]]></title><link>https://blog.csdn.net/chaosweet/article/details/163272297</link><guid>https://blog.csdn.net/chaosweet/article/details/163272297</guid><author>chaosweet</author><pubDate>Tue, 28 Jul 2026 13:53:20 +0800</pubDate><description><![CDATA[Hi，我是前端人类学！无论前端框架如何更迭，防抖节流、发布订阅、Promise、路由、响应式这五个核心模块始终是支撑应用的基石。手写它们不仅能深入理解底层原理，更能提升代码设计能力。本文将逐一实现并剖析其核心逻辑。]]></description><category></category></item><item><title><![CDATA[同源策略、沙箱机制：微前端隔离、iframe 安全防护实战]]></title><link>https://blog.csdn.net/chaosweet/article/details/163243576</link><guid>https://blog.csdn.net/chaosweet/article/details/163243576</guid><author>chaosweet</author><pubDate>Mon, 27 Jul 2026 14:53:56 +0800</pubDate><description><![CDATA[Hi，我是前端人类学！同源策略是浏览器安全基石，JS 沙箱如同隔离牢笼，使不可信代码在受限环境执行，避免污染主应用、防范数据窃取。本文聚焦微前端 JS 沙箱方案、iframe 安全风险及实战防护。]]></description><category></category></item><item><title><![CDATA[跨域全方案对比：CORS、Nginx 反向代理、JSONP、iframe、postMessage]]></title><link>https://blog.csdn.net/chaosweet/article/details/163242772</link><guid>https://blog.csdn.net/chaosweet/article/details/163242772</guid><author>chaosweet</author><pubDate>Mon, 27 Jul 2026 14:33:38 +0800</pubDate><description><![CDATA[Hi，我是前端人类学！跨域是浏览器同源策略导致的拦截行为——协议、域名、端口任一不同，AJAX 请求即被阻断。解决方案没有万能药，需根据场景权衡。本文将对比五种主流方案，并给出选型建议。]]></description><category></category></item><item><title><![CDATA[JS 垃圾回收机制：V8 分代回收、内存泄漏排查（闭包 / DOM 引用 / 定时器）]]></title><link>https://blog.csdn.net/chaosweet/article/details/163161663</link><guid>https://blog.csdn.net/chaosweet/article/details/163161663</guid><author>chaosweet</author><pubDate>Fri, 24 Jul 2026 14:43:41 +0800</pubDate><description><![CDATA[Hi，我是前端人类学！今天我们不写业务代码，来聊聊 JavaScript 的“清洁工”——垃圾回收机制。理解它，你才能写出真正高性能、无内存泄漏的应用。]]></description><category></category></item></channel></rss>