Vue style中的 scoped 属性

Vue 中存在 scoped 属性，HTML5中也存在一个 scoped 属性，而且，这两者都是针对 css 样式处理的属性，所以很多文章在解释 Vue scoped 的时候，都会把两者混为一谈，直接进把 HTML5 scoped 的定义搬到 Vue scoped 上，其实这是不对的，这两个不是一个东西。

HTML5 scoped

在 W3C 和 MDN 文档上是这么说的：

该属性已被移除，不建议使用。

该属性是一个布尔属性。如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。

第一句话就是，不建议使用这玩意。Vue 这么大受众的框架，肯定不会不考虑到这一点。

再就是这玩意只有火狐支持，更不符合项目初衷。

使用方法和 Vue scoped 一致，直接写在 style 标签内部

html 复制代码

<div>
    <style type="text/css" scoped>
      h1 {
        color: red;
      }
      p {
        color: blue;
      }
    </style>
    <h1>这个标题是红色的</h1>
    <p>这个段落是蓝色的。</p>
  </div>

展示效果

控制台DMO结构

可以看到，在 DMO 结构中，只是把我编写的代码原封不动的渲染了，并没有做任何处理，这就是和 Vue scoped 的最大区别

后面再讲到 Vue scoped 原理的时候会做个对比，更容易看出区别在哪。

Vue 组件的样式覆盖

Vue 项目中，每个组件内都会存在一个 <style></style> ，用来编写组件样式，如果组件过多，那么在开发过程中难免会出现，类名相同的情况。一旦类名相同，那么在编译的时候，就可能出现问题。

例如：组件 Student 存在一个 demo 的class，组件 School 也同时存在 demo 的class ，虽然说这两个 class 代表的样式在各自组件中是不一样的，但是，展示的效果却不是我们想要的。

javascript 复制代码

// Student 组件
<template>
  <div>
    <p class="demo">Student组件</p>
  </div>
</template>

<style>
  .demo {
    background:orange
  }
</style>


// School 组件
<template>
  <div>
    <p class="demo">School组件</p>
  </div>
</template>

<style>
  .demo {
    background:red
  }
</style>


// App 组件使用
<template>
  <div id="app">
    <School />
    <Student />
  </div>
</template>

如果按照我们设想的，School 组件展示红色，Student 组件展示橙色，但是实际效果是

两个组件都展示的橙色，Student 组件的样式覆盖了School 组件的样式。这是因为我们在引入组件的时候，Student 组件是后引入的。如果我们先引入 Student 组件，那展示效果又不一样了。

这是因为在webpack 编译的时候，所有组件内的 style 都会合并，相同类名的样式自然就会放到一起，根据css规则，后面的样式自然会覆盖前面的样式。

我把这个空项目打包一下看看这两个组件的style合并之后长啥样。

可以看到当前只存在一个 .demo 的类名，但是这个类名中存在两个 background 属性，按照顺序也就是 Student 组件的样式和 School 组件的样式。

为了避免这个问题， Vue 使用了 scoped 属性，来作为样式隔离。

Vue scoped 样式隔离

先说使用方法，只需要在组件中的 <style></style> 标签中加入 scoped 属性即可，Vue 会自动处理样式，就像下面这样。

css 复制代码

<style scoped>
  .demo {
    background:red
  }
</style>

我在 School 组件和 Student 组件中都加上这个属性，然后再来看看页面展示效果

打包看下编译后的 css 文件长啥样。

css 复制代码

.demo[data-v-2578f57b]{background:orange}
.demo[data-v-5c5da36a]{background:red}

存在两个 demo 类名，但是两个 demo 类名上都新增了一个**[data-v-xxxx]**的属性，这个就是Vue 底层根据我们的 scopde 属性，针对这些样式做了处理，导致在编译的时候，这些样式不被认为是同名样式，所以不会导致样式覆盖。

再来看看控制台上的 DOM节点和样式

可以看到控制台上的样式，和打包之后的样式是一致的，但是在 DOM 节点上，我们可以发现，两个组件的根元素和子元素上，都添加了一个 data-v-xxxx 属性，而且还是相同的。

这是因为 Vue有一个自带的插件 Vue-loader，通过这个插件，就可以实现这些转化，而且不用引入别的第三方包。( Vue-loader 使用的是 Post-CSS 来实现这些转换，在深入的源码研究就暂时不说了，我也还没看到那里去。。。 )

Scoped CSS 和 CSS Modules

一个是在编译之后，给类名上加上属性选择器 的同时，还需要给 DOM 节点增加自定义属性用来隔离样式 -- Scoped CSS

一个是在编译之后，直接在 DOM 节点上给类名增加一个hash后缀，不会在节点上增加自定义属性用来隔离样式，且DOM节点与样式文件展示类名一致 -- CSS Modules。

这样一对比，发现 CSS Modules 是更好用一点哈。所以在 Vue Loader v15 及以上版本增加了

CSS Modules 功能，但是需要手动开启该功能

CSS Modules 必须通过向 css-loader 传入 modules: true 来开启

javascript 复制代码

// webpack.config.js
{
  module: {
    rules: [
      // ... 其它规则省略
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              // 开启 CSS Modules
              modules: true,
              // 自定义生成的类名
              localIdentName: '[local]_[hash:base64:8]'
            }
          }
        ]
      }
    ]
  }
}

然后在你的 <style> 上添加 module 特性，就和添加 scoped 属性一样

javascript 复制代码

<style module>
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
</style>

总结

Vue scoped 作用

给当前组件的所有标签添加一个不重复的data属性 （形如：data-v-40b76154）来表示唯一性
为了避免影响全局样式 ，给每句CSS选择器末尾（编译后生成的CSS语句）加一个当前组件的data-v-hash属性选择器来私有化样式
为了避免影响子组件的样式 ，只会给子组件的最外层标签上添加当前组件的data-v-hash属性

CSS Modules 模块化应用越来越好，也越来越广泛，我觉得还是 CSS Modules 比较好，至少看起来比较清爽一点，不会在节点上增加很多自定义属性