首先大家思考几个问题
为什么有些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三条渲染规则:
- 给HTML的DOM节点加一个不重复data属性(形如:
data-v-19fca230
)来表示他的唯一性 - 在每句css选择器的末尾(编译后的生成的css语句)加一个当前组件的data属性选择器(如
[data-v-19fca230]
)来私有化样式 - 如果组件内部包含有其他组件,只会给其他组件的最外层标签加上当前组件的data属性
scoped设计的初衷就是不能让当前组件的样式修改其他任何地方的样式,因为设计如此
学习提issues
原文:https://segmentfault.com/a/1190000012184604?utm_source=tuicool&utm_medium=referral#articleHeader6