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

Question

在.vue文件中，作用域CSS是一项非常强大的功能，因为它仅允许将CSS应用于当前组件。让我们从一个例子开始。根据文档，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>方法至少有两个结果：

• 在争夺最好的 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>

而且，我们可以更轻松地为整个项目采用重命名过程。

Answer 1

使用您的方法，选择器的特异性变化不同：元素越深，选择器链越长。不平等的特异性可能会打开非常细微的错误之门-可重现，是的，但仍然很细微。为了增加伤害，您将无法仅通过查看代码来发现这些错误-您必须检查构建。

尽管如此，如果这对您的方法论和/或项目范围来说不是问题，您仍然可以在vuejs-loader中采用这种方法。引用文档：

如果您希望作用域样式中的选择器是“较深的”，即影响子组件，则可以使用>>>组合器：

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

上面将被编译成：

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

一些预处理器（例如SASS）可能无法>>>正确解析。在这些情况下，您可以改用/ deep /组合器-这是它的别名，>>>并且工作原理完全相同。