不清理会导致样式重复插入、优先级混乱、覆盖失效和内存泄漏；必须用唯一data-id标识并配对生命周期钩子清理，否则HMR或路由切换时问题加剧。
Vue/React里动态加载样式表时，document.head.appendChild不清理会怎样
样式会不断重复插入，尤其在路由频繁切换的SPA中，<style></style>标签越堆越多，最终导致样式优先级混乱、覆盖失效、甚至内存泄漏。浏览器不会自动去重或卸载已挂载的<style></style>，全靠你手动管理。
- 每次组件挂载都执行
document.head.appendChild(styleEl)，但没配对的remove() - 多个同名CSS类（比如
.button-primary）可能来自不同版本的组件，叠加后实际生效的是最后插入的那个，行为不可控 - 热更新（HMR）时组件重载，旧
<style></style>还挂着，新样式又追加，问题更隐蔽
Vue 3 onUnmounted 或 React useEffect 清理样式节点的写法
核心不是“加样式”，而是“加完记得删”——生命周期钩子必须和样式加载严格配对。不能只在挂载时加，也不能在卸载时随便删所有<style></style>。
- 给插入的
<style></style>打上唯一标识，比如data-id="comp-UserProfile"，清理时只删带这个data-id的节点 - Vue 3 示例：
onMounted(() => { const style = document.createElement('style') style.textContent = '.user-card { color: red; }' style.setAttribute('data-id', 'UserProfile') document.head.appendChild(style) }) onUnmounted(() => { const el = document.head.querySelector('style[data-id="UserProfile"]') if (el) el.remove() }) - React 示例：
useEffect(() => { const style = document.createElement('style') style.textContent = '.user-card { color: red; }' style.setAttribute('data-id', 'UserProfile') document.head.appendChild(style) return () => { const el = document.head.querySelector('style[data-id="UserProfile"]') if (el) el.remove() } }, [])
用CSS Modules或styled-components真能避免累积？
能，但有条件。它们本质是运行时生成带哈希的类名+注入一次样式，不是“自动卸载”。关键看是否启用css-scope隔离机制和是否复用同一份<style></style>。
-
CSS Modules在Webpack/Vite中默认开启局部作用域，每个模块生成独立<style></style>，但若组件多次渲染（如列表项），不会重复插入同一份样式——打包器做了去重 -
styled-componentsv5+ 默认启用StyleSheetManager缓存，相同规则只注入一次；但如果用createGlobalStyle或动态主题切换，仍可能漏删旧全局样式 - 注意：服务端渲染（SSR）场景下，
styled-components需配合ServerStyleSheet提取，否则客户端会重复注入
为什么import './Component.module.css'比手动appendChild更安全
因为构建工具接管了整个生命周期：样式只在模块首次被引用时注入，且注入逻辑内置了去重检查，不需要你写清理代码。
立即学习“前端免费学习笔记（深入）”；
- Vite/Webpack会在HMR时自动替换旧
<style></style>节点，而不是追加 - Tree-shaking后，未使用的CSS模块不会被打包，也不会被加载
- 但要注意：如果在
if分支里import样式文件（比如if (env === 'admin') import './Admin.css'），构建工具无法静态分析，可能造成样式残留
onBeforeUnmount 里删样式，但组件因错误提前 unmount，钩子没触发；或者 React 里依赖数组写错，useEffect 清理函数根本没注册。这种异步偏差，比样式写错更难排查。 
