vue中的scoped屬性的效果其實主要是通過PostCSS轉(zhuǎn)譯實現(xiàn)。
vue-loader文件中有一個lib文件夾 下面有一個style-compiler文件夾，里面的index.js就是處理css的。

里面加載的就是PostCss，PostCSS給組件中的所有dom添加了一個獨一無二的動態(tài)屬性，然后，給CSS選擇器額外添加一個對應(yīng)的屬性選擇器來選擇該組件中dom，原理是利用css的屬性選擇器。

加了 scoped 的話，編譯的時候就把對應(yīng)的選擇器和對應(yīng)的元素綁定一個由全局唯一的字符串產(chǎn)生的屬性。

補充：
樓主給前三個回答點了“沒有幫助”是吧？

我只能說這種行為很腦殘?。?/p>

文檔上有解釋，基本的原理是vue loader在加載scoped css時，做了轉(zhuǎn)換，把

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

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

轉(zhuǎn)換為了：

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

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

你用chrome調(diào)試的時候，就可以看得很清楚了。

樓上說的很清楚了，tag用來限定局部。每個頁面的tag的唯一的，不同頁面即使相同的類也會因tag不同而不會發(fā)生樣式重疊
如果你問的是如果生成或者如果為html添加上tag的話，就需要去看vue-loader源碼了