vue style 原理

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;
}