作用功能：
實(shí)現(xiàn)組件的私有化翁都，不對(duì)全局造成樣式污染，表示當(dāng)前style屬性只屬于當(dāng)前模
塊雖然方便但是我們需要慎用透敌，因?yàn)楫?dāng)我們使用公共組件時(shí)會(huì)造成很多困難描扯，
增加難度定页，想知道造成那些難度，需要先從scoped實(shí)現(xiàn)原理了解
實(shí)現(xiàn)原理：
通過觀察DOM結(jié)構(gòu)可以發(fā)現(xiàn)：vue通過在DOM結(jié)構(gòu)以及css樣式上加上唯一的標(biāo)記绽诚，保證唯一典徊，達(dá)到樣式私有化，不污染全局的作用恩够，如圖卒落，樣式屬性上也會(huì)多一個(gè)該字符，以保證唯一
屏幕快照 2018-03-09 上午10.08.08.png
可以看出加上
scoped后的組件里的標(biāo)簽都會(huì)多一個(gè)data-v-469af010的屬性蜂桶，并且在css樣式部分可以看出
屏幕快照 2018-03-09 上午10.12.00.png
由此可知儡毕，添加
scoped屬性的組件，為了達(dá)到不污染全局扑媚，做了如下處理：
- 給HTML的DOM節(jié)點(diǎn)加一個(gè)不重復(fù)屬性
data-v-469af010標(biāo)志唯一性 - 在添加
scoped屬性的組件的每個(gè)樣式選擇器后添加一個(gè)等同與“不重復(fù)屬性”相同的字段腰湾，實(shí)現(xiàn)類似于“作用域”的作用，不影響全局 - 如果組件內(nèi)部還有組件钦购，只會(huì)給最外層的組件里的標(biāo)簽加上唯一屬性字段檐盟，不影響組件內(nèi)部引用的組件（ 注意 ）
慎用原因：
其實(shí)從原理已經(jīng)能夠了解到慎用原因，這里權(quán)當(dāng)總結(jié)
- 從原理可見押桃，之所以
scoped可達(dá)到類似組件私有化、樣式設(shè)置“作用域”的效果导犹，其實(shí)只是在設(shè)置scoped屬性的組件上的所有標(biāo)簽添加一的data開頭的屬性唱凯，且在標(biāo)簽選擇器的結(jié)尾加上和屬性同樣的字段，起到唯一性的作用谎痢，但是這樣如果組件中也引用其他組建就會(huì)出現(xiàn)類似下面的問題：- 父組件無
scoped屬性磕昼，子組件帶有scoped，父組件是無法操作子組件的樣式的（原因在原理中可知）节猿，雖然我們可以在全局中通過該類標(biāo)簽的標(biāo)簽選擇器設(shè)置樣式票从，但會(huì)影響到其他組件 - 父組件有
scoped屬性，子組件無滨嘱，父組件也無法設(shè)置子組件樣式峰鄙，因?yàn)楦附M件的所有標(biāo)簽都會(huì)帶有data-v-469af010唯一標(biāo)志，但子組件不會(huì)帶有這個(gè)唯一標(biāo)志屬性太雨，與1同理吟榴，雖然我們可以在全局中通過該類標(biāo)簽的標(biāo)簽選擇器設(shè)置樣式，但會(huì)影響到其他組件 - 父子組建都有囊扳，同理也無法設(shè)置樣式吩翻，更改起來增加代碼量
- 父組件無
所以scoped雖然看似方便但是使用還需謹(jǐn)慎
(個(gè)人總結(jié)兜看，不足請(qǐng)指出）
