vue單文件組件是通過vue-loader來解析的。
vue-loader作用：解析單文件組件，在style中添加scope屬性，會自動在該組件所有標簽上添加以data-v開頭的特性名，只有子組件的根節點標簽會添加父組件以及子組件的以data-v開頭的特性，樣式會受到兩個組件的影響，其他的標簽均只會受到子組件內定義的樣式的影響。
scoped屬性說明：
1.使用 scoped 后，父組件的樣式將不會滲透到子組件中。不過一個子組件的根節點會同時受其父組件的 scoped CSS 和子組件的 scoped CSS 的影響。這樣設計是為了讓父組件可以從布局的角度出發，調整其子組件根元素的樣式。
2.同一子組件自動生成的[data-v-be498722]是相同的，無論該子組件應用在哪里，或者應用了幾次。
3.遞歸組件自動生成的[data-v-be498722]是相同的，所以設置的樣式會應用到遞歸組件的所有對應標簽。
舉例說明如下：
1.未設置scope屬性，不自動添加屬性選擇器，則該樣式為全局樣式：
.header
.header {
color: #f00;
}
2.設置scope屬性后，會自動在選擇器后面添加屬性選擇器：
1)屬性選擇器自動添加到最后一個選擇器后面
.header
.header[data-v-be498722] {
color: #f00;
}
2)屬性選擇器自動添加到最后一個選擇器后面
.header1 .header
.header1 .header[data-v-be498722] {
color: #f00;
}
3）設置>>>后，屬性選擇器添加到>>>前的最后一個選擇器后面
>>>.header
[data-v-be498722] .header {
color: #f00;
}
4）設置>>>后，屬性選擇器添加到>>>前的最后一個選擇器后面
.header1>>>.header
.header1[data-v-be498722] .header {
color: #f00;
}