浅谈Vue的style scoped

style scoped的作用

在使用Vue-Cli 开发时，我们都知道，在组件的<style></style>加上 scoped属性，可以让<style></style>里的样式只在当前组件生效。

那，这是如何实现的呢？

Vue 对 scoped的渲染规则

• 对于所有的 Vue 组件，只要设置了<style scoped></style>，Vue就会给该组件生成一个唯一data值。
• Vue 会将data值作为一个属性添加到组件内所有HTML的DOM节点
• 如果组件内部包含子组件，这有两种情况
  • 情况一：子组件没有设置<style scoped></style>，则只会给子组件的最外层标签加上当前组件的data属性
  • 情况二：子组件设置了<style scoped></style>，则子组件会自动生成一个自己的唯一data值，然后子组件最外层标签在自己的data属性后面添加父组件的data属性。
• 对于组件内写在<style scoped></style>里的样式，Vue均会自动在每句css选择器的末尾添加一个当前组件的data属性选择器来私有化样式。

基于上面四点，Vue就实现的scoped的功能。因为，组件scoped里的样式都加了当前组件的唯一标识data属性。也就是说，即使当前组件的class跟其他组件重名，因为每个组件的data属性不一样，当前组件的样式也就不能再其他组件生效了。

渲染规则证明：

1. 规则一：对于所有的 Vue 组件，只要设置了<style scoped></style>，Vue就会给该组件生成一个唯一data值。

   对于这一点的证明，很容易。我们知道，一般的，Vue 入口文件App.vue里的样式是默认全局样式的，也就没有添加<style scoped></style>。所以，编译出来的结果如下图：

那在<style></style>添加scoped属性后呢？

可见App.vue编译后，增加里data属性。由此可知，组件的data属性存在是依据scoped来控制的。

2. 规则二：Vue 会将data值作为一个属性添加到组件内所有HTML的DOM节点

3. 规则三：如果组件内部包含子组件，这有两种情况

   情况一：子组件没有设置<style scoped></style>，则只会给子组件的最外层标签加上当前组件的data属性

   情况二：子组件设置了<style scoped></style>，则子组件会自动生成一个自己的唯一data值，然后子组件最外层标签在自己的data属性后面添加父组件的data属性。

规则二、三结合来证明：

用上面的例子来证，展开App.vue组件得：

App.vue全部HTML的DOM标签都添加的data属性。

仔细看上图，我们发现，<div class="home"></div>标签有两个data属性而且App.vue的data属性在后面。这是应为该标签为Home.vue的最外层标签，而且也添加<style scoped></style>。如下图：

由此可证，子组件设置了<style scoped></style>，则子组件会自动生成一个自己的唯一data值，然后子组件最外层标签在自己的data属性后面添加父组件的data属性。

去掉Home.vue的<style scoped></style>后，编译结果如下：

<div class="home"></div>标签的data属性只剩下App.vue的了。所以可证，子组件没有设置<style scoped></style>，则只会给子组件的最外层标签加上当前组件的data属性

4. **规则四：**对于组件内写在<style scoped></style>里的样式，Vue均会自动在每句css选择器的末尾添加一个当前组件的data属性选择器来私有化样式。

对于这一点，我们直接看控制台可知：

参考文献

vue中style下scope的使用和坑