前端滄海關注
2019.08.07 21:06:09字數 489閱讀 81
七夕了，寫個昨天遇到的bug來緩解下沒有人約的尷尬。
昨天和qa過歷史bug時，發現有好幾個瀏覽器不相容的導致式樣變形的bug，調查了一番發現是因為deep選擇器的原因。
在說bug之前，先看看vue官方是如何說明deep的用法的。
為了保證每個元件的css唯一性，避免汙染全域性或者被全域性汙染，vue提供了scoped作用域
.a[data-v-f3f3eg9] .bvue官方對於deep選擇器的說明這麼寫是沒有問題的，但是實際專案中，還有人深度巢狀的寫法
.a[data-v-32bcae5c] .b
.a[data-v-32bcae5c] .b /deep/ .c
.a[data-v-32bcae5c] .b /deep/ .c因為/deep/選擇器這個是chrome瀏覽器自己的標準，其他瀏覽器並沒有實現這個標準，所以其他瀏覽器是失效的。
有意思的是，google說會在chrome的63這個版本，移除/deep/的支援，不知道為啥現在最新的還是會有？
17年google說要廢棄/deep/既然問題知道了，bug自然就好解決了，不要用/deep/巢狀就好了。
vue官方也說了，當 p 是 scoped 時 (即與特性選擇器組合使用時) 會慢很多倍，當然這種寫法對於程式設計師來說是最友好的。
渲染測試之前寫react時用的是css modules，他比較麻煩的是需要匯入乙個變數，其他的一切完美，vue也提供了支援，新專案還是用css modules吧，解決更徹底。
vue的css modules解決方案關於deep的stackoverflow
vue 中scoped 和 deep的用法深究
前言 我們都知道在元件中給style標籤新增scoped屬性可以避免元件內樣式對外界造成汙染，scoped使得元件內的樣式變成局域樣式，只作用於當前元件。這個是怎麼做到的呢？原理在編譯元件的時候，如果當前元件內style標籤上有scoped屬性，那麼會在當前所有標籤上新增乙個 data v hash...
scoped 和 deep的用法深究
前言 我們都知道在元件中給style標籤新增scoped屬性可以避免元件內樣式對外界造成汙染，scoped使得元件內的樣式變成局域樣式，只作用於當前元件。這個是怎麼做到的呢？原理在編譯元件的時候，如果當前元件內style標籤上有scoped屬性，那麼會在當前所有標籤上新增乙個 data v hash...
Vue 監聽物件屬性的變化 deep 引數
參考官方說明 為了發現物件內部值的變化，可以在選項引數中指定deep true。注意監聽陣列的變更不需要這麼做。在元件中配置是這樣寫的 watch deep true 是否監聽物件內部屬性的變化 比如我在乙個元件資料是這樣的 export default diaryorigin logoimageu...