scoped属性，data-v-19fca230

首先大家思考几个问题

为什么有些css属性的style里面要加scoped？
为什么查看一些源码，HTML和css上面会带上data-v-19fca230？
他们究竟有什么含义？

想知道为什么，继续往下看
当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。

使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件有作用域的 CSS 和子组件有作用域的 CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。

你可以在一个组件中同时使用有作用域和无作用域的样式：

<style>
/* 全局样式 */
</style>

<style scoped>
/* 本地样式 */
</style>

源： https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html

---

scoped

我们假设把这种添加scoped的组件叫做模块私有组件，其他的未加scoped的叫做模块一般组件。通过查看DOM结构发现：vue通过在DOM结构以及css样式上加唯一不重复的标记，以保证唯一，达到样式私有化模块化的目的。

从上面的字可以看出，添加了scoped属性的组件，为了达到组件样式模块化，做了两个处理：

• 给HTML的DOM节点加一个不重复data属性(形如：data-v-19fca230)来表示他的唯一性
• 在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-2311c06a]）来私有化样式

大家都知道css样式有一个优先级的说法，scoped的这一操作，虽然达到了组件样式模块化的目的，但是会造成一种后果：每个样式的权重加重了：理论上我们要去修改这个样式，需要更高的权重去覆盖这个样式。这是增加复杂度的其中一个维度

解决方案：
不使用scoped属性，更多详细介绍可以参考这篇文章

上面文章对于模块实现的原理，浏览器如何渲染，模块一般组件（未添加scoped）引用模块私有组件和添加scoped做了详细的描述总结出来就是

修改样式的权重（增加选择器层级，ID选择器，并列选择器，impotant等）

总结一下scoped三条渲染规则：

1. 给HTML的DOM节点加一个不重复data属性(形如：data-v-19fca230)来表示他的唯一性
2. 在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-19fca230]）来私有化样式
3. 如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性

scoped设计的初衷就是不能让当前组件的样式修改其他任何地方的样式，因为设计如此

学习提issues

原文：https://segmentfault.com/a/1190000012184604?utm_source=tuicool&utm_medium=referral#articleHeader6