vue2的scoped 原理

Vue 2 中的 Scoped CSS 是通过 PostCSS 插件 postcss-scoped 实现的,其核心原理是通过为组件添加唯一属性标识重写 CSS 选择器来实现样式隔离。以下是详细原理:


实现步骤:

  1. 添加唯一属性标识

    当在 <style> 标签中添加 scoped 属性后,Vue 在编译时会为当前组件的所有 DOM 元素 添加一个唯一的 data-v-xxxxxxx 属性(如 data-v-9ea40744)。该哈希值基于组件路径生成,确保全局唯一。

  2. 重写 CSS 选择器

    同时,Vue 会重写 <style scoped> 内的所有 CSS 规则 ,在每个选择器末尾添加属性选择器 [data-v-xxxxxxx]

    例如:

css 复制代码
   /* 原始样式 */
.home {
  background: red;
}
.img {
  width: 100%;
}

编译后变为:

css 复制代码
.home[data-v-9ea40744] {
  background: red;
}
.img[data-v-9ea40744] {
  width: 100%;
}

最终效果:

html 复制代码
<!-- 编译后的模板 -->
<div data-v-9ea40744="" class="home">
	<img data-v-9ea40744="" alt="Vue logo" src="" class="img">
</div>

<!-- 编译后的样式 -->
<style>
.home[data-v-9ea40744] {
  background: red;
}
.img[data-v-9ea40744] {
  width: 100%;
}
</style>
  • 样式仅作用于当前组件 :由于其他组件的 DOM 元素没有相同的 data-v-xxxxxxx 属性,样式不会泄露。
  • 不影响全局样式 :未添加 scoped 的样式仍为全局样式。

深度选择器(穿透作用域)

当需要影响子组件样式时,使用深度选择器:

css 复制代码
/* 写法1:Vue 2 推荐 */
.parent >>> .child { color: blue; }

/* 写法2:Sass/预处理器可用 */
.parent /deep/ .child { color: blue; }

/* 写法3:Vue 3 也兼容的语法 */
.parent ::v-deep .child { color: blue; }

编译后:

css 复制代码
.parent[data-v-f3f3eg9] .child { color: blue; }

注意:深度选择器会移除子组件选择器前的属性限定,使样式穿透到子组件。


关键特点:

  1. 局部作用域
    样式仅影响当前组件,避免全局污染。
  2. 属性选择器实现
    不依赖 CSS Modules 的类名哈希,而是通过 HTML 属性隔离。
  3. 编译时处理
    .vue 文件编译阶段由 vue-loader 完成转换。
  4. 权重不变
    选择器权重与原始规则一致(如 .class[attr] 权重 = 类选择器 + 属性选择器)。

注意事项:

  • 不适用于动态内容 :通过 v-html 插入的 DOM 不会添加 data-v-xxxxxxx 属性,需手动处理或使用深度选择器。
  • 性能影响:属性选择器比类选择器稍慢,但现代浏览器中差异可忽略。
  • 避免全局样式泄漏:Scoped 样式依然可能被全局样式覆盖(因 CSS 层叠规则)。

通过这种巧妙的属性选择器重写机制,Vue 2 实现了简洁高效的 CSS 作用域隔离。

相关推荐
一只一只妖2 小时前
突发奇想,还未实践,在Vben5的Antd模式下,将表单从「JS 配置化」改写成「模板可视化」形式(豆包版)
前端·javascript·vue.js
悟能不能悟5 小时前
js闭包问题
开发语言·前端·javascript
秋秋_瑶瑶5 小时前
vue-amap组件呈现的效果图如何截图
前端·javascript·vue-amap
gnip6 小时前
js上下文
前端·javascript
中草药z6 小时前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
野犬寒鸦7 小时前
力扣hot100:搜索二维矩阵 II(常见误区与高效解法详解)(240)
java·数据结构·算法·leetcode·面试
不知名raver(学python版)7 小时前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js
醉方休7 小时前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
excel7 小时前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端