说说 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;
}
相关推荐
sunbyte23 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
markyankee10128 分钟前
Vue 计算属性和侦听器详解
vue.js
盏茶作酒291 小时前
打造自己的组件库(一)宏函数解析
前端·vue.js
一大树2 小时前
Vue3 开发必备:20 个实用技巧
前端·vue.js
ze_juejin2 小时前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
码哥DFS3 小时前
Flex布局原理
前端·css·css3
小样还想跑4 小时前
axios无感刷新token
前端·javascript·vue.js
用户3802258598244 小时前
vue3源码解析:响应式机制
前端·vue.js
时间会给答案scidag4 小时前
报错 400 和405解决方案
vue.js·spring boot
白杨木影子被拉长4 小时前
多状态映射不同样式(scss语法)
vue.js·uni-app