一般在普通的 Vue 開發中我們可能都會在元件樣式中看到這個詞 scoped ，那他有什麼用呢，它的原理是什麼，下面給出了一些個的看法，可以參考。

一、什麼是 scoped ， scoped 有什麼用

scoped 是 style 標籤的一個屬性，當在 style 標籤中定義了 scoped 時，style 標籤中的所有屬性就只作用於當前元件的樣式，實現元件樣式私有化，從而也就不會造成樣式全域性汙染

二、scoped 原理

• Vue 中的 scoped 屬性的效果主要通過 PostCSS(一種對css編譯的工具) 轉譯實現；
• 為每一個元件例項生成一個唯一的標識（相當於 HTML 中的 id 選擇器的作用），一般格式為：data-v-xxxxx，即 原選擇器[data-v-xxxxx]

例項：

未使用 scoped 屬性前

<template>
 <div class="test">Hello, Welcom!</div>
</template>

<style scoped>
.test {
 font-size:66px;
}
</style>

 使用 scoped 後

<template>
 <div class="test" data-v-698543>Hello, Welcom!</div>
</template>

<style scoped>
.test[data-v-698543] {
 font-size:66px;
}
</style>
 

三、樣式穿透

1、為什麼要樣式穿透？？？

專案開發中，多數情況下不能避免引用第三方元件，而第三方元件的樣式又不全是我們想要的，就需要在元件中區域性修改第三方元件的樣式，但同時又不想去除 scoped 屬性和避免樣式汙染。此時只能通過穿透 scoped

2、寫法

如果 CSS 使用原生樣式，就是用 > 來修改第三方元件樣式

<style scoped>
 外層 > 第三方元件 {
  樣式
 }
</style>

如果使用了前處理器 less sass scss 可能會因無法編譯報錯，就可以使用 /deep/ 修改，但是 vue-cli3 以上的版本不支援

<style scoped>
 外層 /deep/ 第三方元件 {
  樣式
 }
</style>

使用 ::v-deep

<style scoped>
 外層 ::deep 第三方元件 {
  樣式
 }
</style>

使用樣式穿透後 生成的額唯一標識 都只會在父級元素中，子級元素中的唯一標識使用父級後生成中的。