说说 Vue 中 CSS scoped 的原理?

在 Vue 中,使用 scoped 关键字为 <style> 标签加作用域,可以让样式仅作用于当前组件,避免样式污染。这在大型项目或组件库开发中非常实用。

scoped 本质是 Vue 编译时通过给 HTML 和 CSS 添加一个独特的 data-xxx 属性,从而实现样式"仅本组件生效"。

示例 🧪

带scoped的组件样式

js 复制代码
<template>
  <div class="box">Hello</div>
</template>

<style scoped>
.box {
  color: red;
}
</style>

编译后的 DOM 会变成 👇:

html 复制代码
<div class="box" data-v-123abc>Hello</div>

对应的 CSS 变成:

css 复制代码
.box[data-v-123abc] {
  color: red;
}

data-v-123abc 就是 Vue 自动生成的作用域属性。浏览器渲染时这个选择器只会选中本组件中的元素。

伪类和组合选择器

原始写法:

css 复制代码
.button:hover {
  background: blue;
}

编译后:

css 复制代码
.button[data-v-abc123]:hover {
  background: blue;
}

原理解析 🔍

1.模板编译阶段: Vue 会在每个元素上添加一个作用域属性(如 data-v-xxxxxx)

2.样式处理阶段: Vue 会将 style scoped 中所有的选择器都加上[data-v-xxxxxx]后缀

3.最终: 这样最终的 CSS 是"命中目标组件内部元素"的,其他组件即便也有 .box,由于没有 data-v-xxxxxx 属性,不会生效。

注意点 🚧

  • scoped 不会影响子组件样式(即不会向下传递);
  • scoped 不会作用于 <style lang="scss"> 中嵌套的全局样式变量,除非你加 :global;
  • 动态添加的 DOM 不会自动带上 data-v-xxx,需使用模板渲染。

🧰 扩展用法

全局样式怎么办?🌐

css 复制代码
<style>
/* 不加 scoped,就是全局样式 */
body {
  background: #f5f5f5;
}
</style>

在 scoped 中写全局样式 🌍

css 复制代码
:global(.el-button) {
  margin: 0;
}
相关推荐
洛千陨12 分钟前
Web Worker基础概念 & 图片滤镜处理实际应用 -- Vue3
javascript·vue.js
半花14 分钟前
【vue】v-自定义指令
前端·vue.js
武昌库里写JAVA21 分钟前
【MySQL】MySQL数据库如何改名
java·vue.js·spring boot·sql·学习
飞翔的佩奇2 小时前
Java项目:基于SSM框架实现的社区团购管理系统【ssm+B/S架构+源码+数据库+毕业论文+答辩PPT+远程部署】
java·数据库·vue.js·毕业设计·mybatis·答辩ppt·社区团购
_未完待续2 小时前
框架实战指南-错误处理
前端·vue.js
_未完待续2 小时前
框架实战指南-组件参考
前端·vue.js
半花2 小时前
【Vue】通信组件
前端·vue.js
前端 贾公子2 小时前
vue如何在data里使用this
前端·javascript·vue.js
ZzMemory2 小时前
深入了解 module.css:前端样式管理的有效方案
前端·css·面试
_未完待续3 小时前
框架实战指南-元素参考
前端·vue.js