Question

在.vue个文件中，作用域CSS 是一个非常强大的功能，因为它允许CSS仅应用于当前组件。让我们从一个例子开始吧。根据{{3}}，vue-loader将转换以下代码：

<style scoped>
.example {
  color: red;
}
ul {
  list-style-type: none;
}
li {
  display: inline-block;
}
</style>

<template>
  <div class="example">
    <ul>
      <li>1</li>
      <li>2</li>
    </ul>
  </div>
</template>

成：

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
ul[data-v-f3f3eg9] {
  list-style-type: none;
}
li[data-v-f3f3eg9] {
  display: inline-block;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>
    <ul data-v-f3f3eg9>
      <li data-v-f3f3eg9>1</li>
      <li data-v-f3f3eg9>2</li>
    </ul>
  </div>
</template>

如我们所见，组件的每个节点都有data-v-f3f3eg9属性。我们已经明白，在一个大型项目中，有多个组件和他们自己的作用域CSS，我们将观察到data-v-<hash>属性的无处不在。（我认为）这种data-v-<hash>方法至少有两个后果：

在竞争documentation CSS优化器来获取较小的文件时，这种方法最终会产生非常大的CSS文件。
必须影响解析DOM树的效率。

我的问题是：为什么Vue.js采用了这种策略？

实际上，由于每个组件模板必须只包含一个根元素，因此它本身可以定义CSS的范围，仅具有data-v-f3f3eg9属性。此外，它可能是一个额外的短类名，例如只有cf3f3eg9（这里c确保类名不以数字开头）：

<style>
.example.cf3f3eg9 {
  color: red;
}
.cf3f3eg9 ul {
  list-style-type: none;
}
.cf3f3eg9 li {
  display: inline-block;
}
</style>

<template>
  <div class="example cf3f3eg9">
    <ul>
      <li>1</li>
      <li>2</li>
    </ul>
  </div>
</template>

我们可以更轻松地为整个项目采用best流程。

Answer 1

使用您的方法，选择器的特异性会有所不同：元素越深，选择器链就越长。不平等的特异性可以打开非常微妙的错误 - 可重复，是的，但仍然是微妙的。为了增加对伤害的侮辱，你将无法通过单独查看代码来发现这些错误 - 你必须检查构建。

但是，如果这不是您的方法和/或项目范围的问题，您仍然可以将此方法与vuejs-loader一起使用。引用the doc：

如果您希望范围样式中的选择器“深入”，即影响子组件，您可以使用＆gt;＆gt;＆gt;组合子：

<style scoped> 
.a >>> .b { /* ... */ } 
</style>

以上将是汇编成：

.a[data-v-f3f3eg9] .b { /* ... */ }

一些预处理器，例如SASS，可能无法正确解析>>>。在这些情况下，你可以使用 / deep / combinator代替 - 它是>>>的别名并且完全正常工作同样的。

Vue.js：作用域CSS的“data-v- <hash>”属性

1 个答案: