Vue中迭代組件使用scoped樣式好不好

Question

我們在 Vue 的組件中使用 scoped 樣式，它有優勢。 但是假設我有一個像 BoxComponent.vue 這樣的組件並定義了一個 class。

<style scoped>
.box-component{
  float: left;
  flex-grow: initial !important;
  margin: 0 3px;
}
</style>

我認為一次或兩次使用它可能會很好，但是當我在循環中使用它時可能會循環數百次，然后它將生成獨立的樣式類，因為vue-loader會以不同的方式處理每個項目。

在那種情況下，我認為這可能是速度和 memory 用法方面的問題。 有人可以詳細說明嗎？ Vue.js什么時候用scoped style好還是global style好？

Answer 1

IMO，這個問題應該更像是一個

我是否需要我的風格在這里是全球性的？

比性能的。 我會說它總體上毫無意義，特別是如果您使用實用程序框架（如 Tailwind）。 事實上，您將在所有頁面上獲得更少的 CSS 次重新定義。

選擇如何編寫 CSS 以及具體使用什么，將比是否確定范圍產生更大的影響。 如果您對保持超薄的東西感興趣，請閱讀像UnoCSS這樣的超輕工具。

此外，第三方腳本（如 GTM、小部件聊天或公司強制添加的任何內容）對性能的影響會大得多。

我不認為運行時 CSS 會讓你的性能很差，只是不要在你的網站上使用像*或div這樣的超級通用選擇器，你應該沒問題。

盡管如此，如果你有一個超大的網站，最好通過檢查總渲染時間來嘗試以某種方式對整個網站進行基准測試（當然要關注樣式指標）： https://developer.chrome.com/docs /devtools/評估性能/