在vue元件中 style 標籤中我們經常使用 scoped 屬性來防止在修改父元件的樣式時把其中的子元件中的樣式修改掉，使得它的樣式只在本元件中起作用，所有我們平常開發中都在 style 標籤中新增這個屬性。而如果在本元件想修改子元件中的樣式，我們可以使用深度選擇器來修改其子元件樣式。
在開發中，經常遇到這個問題，於是想著一**竟！
**示例：
上面就是我們經常在vue元件編寫樣式的**
為什麼我們經常在谷歌瀏覽器中檢查元素時，看到有一些元素標籤上面有類似中含有data-v-***的屬性，這就是為了實現 scoped 效果而新增的這個屬性。下面我們解釋一下scoped屬性實現的原理：
1.首先data-v-***這個東西是通過檔案路徑名和內容 hash 生成的，每個vue檔案對應乙個唯一的此id。
2.在vueloader中，每當引入乙個.vue檔案時，都會生成乙個對應此檔案的唯一id。
3.那麼在渲染出來的 html 標籤中的data-v-***屬性是怎麼新增上去的呢？我們知道，乙個元件的render方法返回的vnode,描述了元件對應的 html 標籤和結構，html 標籤對應的 dom 節點是從虛擬 dom 節點構建的，乙個vnode包含了渲染 dom 節點需要的基本屬性。其實在templateloader中，在每乙個 dom 標籤對應的vnode中新增了這個唯一的data-v-***屬性。
4.最後在stylepostloader中，如果style標籤中有scoped屬性，做的工作就是將所有選擇器都新增乙個屬性選擇器的組合限制，沒有scoped屬性的話，就不會在選擇器中多加入乙個屬性選擇器。因為在style標籤中編寫的選擇器都新增了乙個屬性選擇器[data-v-***],因為這個屬性在本元件中的標籤才存在，它的子元件或者其它元件是另外乙個data-v-***屬性，所有這也就解釋了為什麼加了scoped屬性之後為什麼修改其他元件的樣式不會生效的原因，加了屬性選擇器之後就找不到元件外的元素了。
Vue中的scoped和scoped穿透
文章摘自 一 什麼是scoped 在vue檔案中的style標籤上有乙個特殊的屬性 scoped。當乙個style標籤擁有scoped屬性時候，它的css樣式只能用於當前的vue元件，可以使元件的樣式不相互汙染。如果乙個專案的所有style標籤都加上了scoped屬性，相當於實現了樣式的模組化。二 ...
vue中scoped的原理
實現元件的私有化，不對全域性造成樣式汙染，表示當前style屬性只屬於當前模 塊 實現原理 通過觀察dom結構可以發現 vue通過在dom結構以及css樣式上加上唯一的標記，保證唯一，達到樣式私有化，不汙染全域性的作用，如圖，樣式屬性上也會多乙個該字元，以保證唯一 可以看出加上scoped後的元件裡...
vue 中 scoped 的原理
之前寫vue頁面的時候，使用的是 快捷方式，打出vue之後使用tab鍵，就可以快捷的建立出vue頁面的template，script和style，之前一直有注意到style中有乙個scoped的屬性，但是一直不知道是幹啥的。今天乙個前輩給我講了，所以記錄下來，以供日後複習。實現組建的私有化，不對全域...