14.scoped、class 哈希、组件哈希

为什么需要样式隔离

组件化开发下，多个页面和组件会共存于同一份最终 CSS 中。如果没有隔离机制，类名冲突和样式污染几乎不可避免。

三种常见思路

scoped

通过给当前组件 DOM 和选择器都附加唯一属性，实现“只在当前组件生效”的效果。

class 哈希

构建阶段把类名改写成带哈希的唯一值，例如 .button_a1b2c3，常见于 CSS Modules。

组件哈希

以组件为粒度生成唯一标识，再参与样式选择器拼装，本质上也是隔离的一种实现方式。

对比

• scoped：易用，适合 Vue 单文件组件。
• class 哈希：更显式，适合大型项目和样式模块化。
• 组件哈希：更偏框架内部实现细节。

注意点

• scoped 不能完全阻止子组件根节点样式受到影响。
• 深层穿透样式要谨慎使用，否则会重新引入污染。
• 哈希方案虽然安全，但调试时可读性会下降。