Question

我正在开发一个使用VueJs的新应用程序，我看到实现了一个＆＃34; css范围＆＃34;像这样

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

呈现像

<style>
.example[_v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" _v-f3f3eg9>hi</div>
</template>

我将开发一个包含Atomic设计中许多组件的大项目，并且我会询问它是否更好，性能，使用类或使用范围

Answer 1

Scoped样式不会消除对类的需求。由于浏览器呈现各种CSS选择器的方式，当作用域时（即与属性选择器组合时），p {color：red}将慢很多次。如果您使用类或ID，例如.example {color：red}，那么您几乎可以消除性能损失。 Here's a playground您可以自己测试差异。

这是引用可以找到here

的官方vue-loader文档

Answer 2

它不会影响性能。

与更复杂的进程（例如，解析/解释js，渲染html等）相比，css解析时间绝对无关紧要。

Answer 3

我认为假设属性选择器不会影响CSSOM角度的性能是危险的。做一个快速搜索，我找不到太多支持，但似乎Vue的意图是伟大的，但最终结果可能释放远不如性能的CSS，而不是他们没有使用属性选择器。

我认为这取决于你的应用程序的大小，你只需要进行基准测试。但作为基线，您不应该使用属性选择器，因为它们不太具体，因此浏览器的目标需要稍微多一些。

Vuejs css范围的表现

3 个答案: