小编ekq*_*qnp的帖子

在.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采用这种策略 …