Vuestyle属性scoped原理详解
Vue 样式属性 scoped 原理详解
讲讲 vue 中 scoped 属性的实现原理以及由此产⽣的特殊情况，然后引出样式的权重这⼀概念。
（⼀）什么是 scoped
当 style 标签有 scoped 属性时，它的 CSS 只作⽤于当前组件中的元素。通过该属性，可以使组件之间的样式互不污染，实现样式的模块化。
（⼆）scoped 原理
主要通过使⽤ PostCSS 来实现以下转换：
<style scoped>
.example {
color: red;
}
css 属性选择器
</style>
<template>
<div class="example">hi</div>
</template>
转换结果：
<style>
.example[data-v-7668812d] {
color: red;
}
</style>
<template>
<div class="example" data-v-7668812d>hi</div>
</template>
通过给 dom 增加⼀个动态属性，然后 css 选择器也额外添加对应的属性来选择该 dom ，达到该样式只作⽤于含有该属性的 dom，实现组件样式的模块化。
（三）特殊⽤法
scoped 这个属性就是专门⽤于实现样式的模块化的，使⽤这个属性意味着样式不能经过外部或者全局的调整，在使⽤之初就应该规划好。但有时候我们可能需要引⼊第三⽅组件，修改他的样式⼜不想去除 scoped 造成组件之间的样式污染，所以才有了下⾯的特殊⽤法。scoped 穿透（深度作⽤选择器）
如果你希望 scoped 样式中的⼀个选择器能够作⽤得“更深”，例如影响⼦组件，你可以使⽤ >>> 操作符：
<style scoped>
.外层 >>> .第三⽅组件 { /* ... */ }
</style>
上述代码将会编译成：
.外层[data-v-7668812d] .第三⽅组件 { /* ... */ }
通过 >>> 可以使得在使⽤scoped属性的情况下，穿透scoped，修改其他组件的值。
实现原理其实就是加权重（后⾯细讲）
顺带⼀提，>>> 功能由 vue-loader 提供。 vue-loader 专门⽤于解析 vue ⽂件，提取每个语⾔块（html、script、style），如有必要会通过其它 loader 处理，最后将他们组装成⼀个 CommonJS 模块，ports 出⼀个 Vue.js 组件对象。
（四）权重选择器
CSS权重指的是样式的优先级，有两条或多条样式作⽤于⼀个元素，权重⾼的那条样式对元素起作⽤，权重相同的，后写的样式会覆盖前⾯写的样式。
权重等级
1. !important，加在样式属性值后，权重值为 10000
2. 内联样式，如：style=””，权重值为1000
3. ID选择器，如：#content，权重值为100
4. 类，伪类和属性选择器，如： .content、:hover、[data-v-7668812d] 权重值为10
5. 标签选择器和伪元素选择器，如：div、p、:before 权重值为1
6. 通⽤选择器（*）、⼦选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0
相同权重下：内嵌样式 > 内部样式表 > 外联样式表
我们可以通过改变权重修改样式，scoped 实质就是添加了属性选择器增加了10的权重，我们只要超过他就可以了。
如 vue-loader 提供的 >>> 实质就是为第三⽅组件增加了外层属性的类，并且该类也带有属性选择器，相当于增加了20的权重。
那么我们可以为组件增加⼀个命名空间，防⽌变量污染，然后在当前命名空间下添加选择器增加权重达到修改样式的⽬的。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。