scoped实现原理
- 为组件实例生成一个唯一标识,给组件中的每个标签对应的dom元素添加一个标签属性,data-v-xxxx
- 给
<style scoped>
中的每个选择器的最后一个选择器添加一个属性选择器,原选择器[data-v-xxxx],如:原选择器为.container #id div,则更改后选择器为.container #id div[data-v-xxxx]
样式穿透原理:
- scoped后选择器最后默认会加上当前组件的一个标识,比如[data-v-49729759]
- 用了样式穿透后,在deep之后的选择器最后就不会加上标识