小米官宣：2023年上半年出貨量中國第一！
今日早間，小米電視官方微博帶來消息，稱2023年小米電視上半年出貨量達到了中國第一，同時還表示小米電視的巨屏風暴即將開始。“公布一個好消息2023年#小米電視上半年出貨量中國
最近在看一篇微前端的文章的時候，看到了這么一個評論，瞬間引起了我的求知欲，這個評論是這樣的：
可能有些人不知道微前端是啥，也不知道 主應用 和 子應用 是啥，我畫一個圖給大加簡單展示一下吧：
在這里再說一下 vue 文件的 scoped style 是怎么做到樣式隔離的，其實就是 vue解析器 在解析 vue 文件的時候，會通過內部的一種計算方法（怎么算的后面會說），給每一個 vue 文件的 html 標簽加上 data-v-xxx 這樣的屬性，接著通過屬性選擇器 ，來進行樣式隔離，也叫樣式模塊化。
回到剛剛那個問題，微前端項目中的 主項目 和 子項目 由于存在了相同相對路徑的 vue 文件，導致了兩個項目的兩個 vue 文件的樣式產生了沖突~
所以，我們可以初步知道了，data-v-xxx這個屬性是根據 vue文件相對路徑去計算出來的。但這也只是初步而已，具體我們還得去看一下源碼才行，這樣才能鍛煉我們解決問題的能力~
先來看看 Webpack + vue-loader 對 Vue2 是怎么處理的，源碼鏈接：https://github.com/vuejs/vue-loader/blob/8357e071c45e77de0889a9feedf2079a327f69d4/src/index.ts#L142
再來看看 vite + @vitejs/plugin-vue 對于 Vue3是怎么處理的，源碼鏈接：https://github.com/vitejs/vite-plugin-vue/blob/main/packages/plugin-vue/src/utils/descriptorCache.ts
其實兩種的解析方式大差不差，總結為以下：
所以可以看出在開發環境和生產環境的時候，都有可能兩個 vue 文件的 scoped style 樣式發生沖，雖然這只是比較邊界的情況~
為什么生產環境不把文件內容加入計算呢？我想應該是因為開發階段文件內容變化的比較頻繁，所以如果把文件內容加入計算的話，勢必會造成構建時間的加長。
雖然 scoped style 發生樣式沖突只是小概率事件，但是我們也得思考一下怎么去避免呢？
掘金有一個大佬，給 Vue 官方提了一個 PR，就是在計算 data-v-xxx的時候，加入 package.json 的 name進行計算，也就是項目名，這樣能防止兩個不同項目之間的樣式沖突~
大佬牛啊！！！
本文鏈接：http://www.www897cc.com/showinfo-26-78653-0.htmlVue 的 style 加了 scoped 也會樣式沖突？可怕！
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號