Vuejs css范围的表现

Question

我正在用VueJs开发一个新的应用程序,我看到实现这样的"css范围"

<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

范围样式不会消除类的需要.由于浏览器呈现各种CSS选择器的方式,当作用域时(即与属性选择器组合时),p {color:red}将慢很多倍.如果您使用类或ID,例如.example {color:red},那么您几乎可以消除性能损失.这是一个游乐场,您可以自己测试差异.

这是引用vue-loader可在此处找到的官方文档