块虽然方便但是我们需要慎用,因为当我们使用公共组件时会造成很多困难,
增加难度,想知道造成那些难度,需要先从scoped实现原理了解
通过观察DOM结构可以发现:vue通过在DOM结构以及css样式上加上唯一的标记,保证唯一,达到样式私有化,不污染全局的作用,如图,样式属性上也会多一个该字符,以保证唯一
可以看出加上 scoped 后的组件里的标签都会多一个 data-v-469af010 的属性,并且在css样式部分可以看出
由此可知,添加 scoped 属性的组件,为了达到不污染全局,做了如下处理:
其实从原理已经能够了解到慎用原因,这里权当总结