vue style 的实现主要通过css 的属性选择器
什么是属性选择器？
答：用于判断标签属性的一种选择器
<style>
.a[self_attribute]{
...
}
</style>
<!-- 生效 -->
<div self_attribute class="a"></div>
<!-- 不生效 -->
<div class="a"></div>
组件定义scoped class
编译完成后，为了防止class 与其他组件的样式产生覆盖，vue生成随机名使用属性选择器来区分
<template>
<p class="app">app</p>
</template>
<style scoped>
.app {
font-size: 20px;
}
</style>
------------------------------------------
编译结果
<p data-v-7a7a37b1 class="app">app</p>
.app[data-v-7a7a37b1] {
font-size: 20px;
}
组件定义没有scoped 的 class
这个比较简单，全局使用的话，编译后的class 不加任何属性选择器就行了
深度css呢
可见当使用深度css，编译结果有一条[data-v-7a7a37b1] .hello_world [data-v-7a7a37b1]是App.vue的标记，p作为HelloWorld.vue的根标签，也被绑定了[data-v-7a7a37b1]，在[data-v-7a7a37b1]下的全部.hello_world都会生效，值得注意的是[data-v-7a7a37b1] .hello_world使用的是后代选择器，作为根标签的p本身并不会受深度css的影响，只对非根标签影响。
=== App.vue
<template>
<p class="app">app</p>
<HelloWorld class="hello_world"></HelloWorld>
</template>
<style scoped>
::v-deep(.hello_world) {
font-size: 40px;
}
</style>
=== HelloWorld.vue
<template>
<p class="hello_world">hello_world</p>
</template>
------------------------------------------
编译结果
<p data-v-e17ea971="" data-v-7a7a37b1="" class="hello_world">hello_world</p>
[data-v-7a7a37b1] .hello_world {
font-size: 40px;
}