总结一下scoped三条渲染规则
给HTML的DOM节点加一个不重复data属性(形如:data-v-2311c06a)来表示他的唯一性
在每句css选择器的末尾(编译后的生成的css语句)加一个当前组件的data属性选择器(如[data-v-2311c06a])来私有化样式
如果组件内部包含有其他组件,只会给其他组件的最外层标签加上当前组件的data属性
对于引用的三方库,如果对方使用了scoped,我们无力改变什么,如果确实需要修改他的样式最能在不加scoped的组件中修改样式,或者全局样式直接修改,这很粗暴!
对于自己维护的组件,一定要想清楚,组件的样式能
否满足所有的情况。如果确实需要加,无疑会增加使用这个组件的开发同学的工作!
个人总结:
某一个不共用的单独页面,或者是仅对某一个功能页面使用的单独页面, 可以使用scope,样式私有了,其他页面也不会去改它的样式,
如果是共有页面的组件,并且是封装好的,其他页面,可能会改变它的样式,则不使用scope
在vue中引入第三方组件库的时候,vue组件中样式的scoped就会阻碍我们修改第三方组件库的样式
在所有需要重新定义样式的element组件上添加自定义class(防止自定义样式影响全局)