style上加scoped属性的原理是什么？

在 Vue 中，<style scoped> 的作用是 让样式只作用于当前组件内部，防止样式“污染”其他组件，也防止被其他组件覆盖。

原理简述

当你在 <style> 标签中加上 scoped：

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

Vue 编译器会做两件事：

1. 给组件的 DOM 元素自动添加一个特殊属性

比如：<div class="my-box"></div>
编译后会变成：

<div class="my-box" data-v-123abc></div>

2. 给样式选择器也添加这个特殊属性

即样式会变成：

.my-box[data-v-123abc] {
  color: red;
}

这样，就能确保该样式 只作用在当前组件的 DOM 元素上，不会影响到其他组件。

技术关键点

• 这个特殊属性类似于：data-v-xxxxxx（在 Vue 2 中由 vue-loader 实现）。

• 实现方式依赖的是 PostCSS + vue-loader，通过静态分析修改 CSS 选择器。

• 是 编译时行为，不会增加运行时开销。

示例：

<template>
  <div class="box">Hello</div>
</template>

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

最终渲染成：

<div class="box" data-v-8b6c123f> Hello </div>
<style>
.box[data-v-8b6c123f] {
  color: red;
}
</style>

注意事项

• scoped 只影响当前 <style> 里的样式，不会影响 style 内部引入的全局样式。

• scoped 样式选择器在作用到深层子组件时需要 >>> 或 /deep/ 或 ::v-deep。

/* 影响子组件内部的样式 */
.parent >>> .child {
  color: blue;
}