俄羅斯：將審查iPhone等外國公司設(shè)備 保數(shù)據(jù)安全
iPhone和特斯拉都屬于在各自領(lǐng)域領(lǐng)頭羊的品牌，推出的產(chǎn)品也也都是數(shù)一數(shù)二的，但對(duì)于一些國家而言，它們的產(chǎn)品可靠性和安全性還是在限制范圍內(nèi)。近日，俄羅斯聯(lián)邦通信、信息技術(shù)
最近在看一篇微前端的文章的時(shí)候，看到了這么一個(gè)評(píng)論，瞬間引起了我的求知欲，這個(gè)評(píng)論是這樣的：
可能有些人不知道微前端是啥，也不知道 主應(yīng)用 和 子應(yīng)用 是啥，我畫一個(gè)圖給大加簡單展示一下吧：
在這里再說一下 vue 文件的 scoped style 是怎么做到樣式隔離的，其實(shí)就是 vue解析器 在解析 vue 文件的時(shí)候，會(huì)通過內(nèi)部的一種計(jì)算方法（怎么算的后面會(huì)說），給每一個(gè) vue 文件的 html 標(biāo)簽加上 data-v-xxx 這樣的屬性，接著通過屬性選擇器 ，來進(jìn)行樣式隔離，也叫樣式模塊化。
回到剛剛那個(gè)問題，微前端項(xiàng)目中的 主項(xiàng)目 和 子項(xiàng)目 由于存在了相同相對(duì)路徑的 vue 文件，導(dǎo)致了兩個(gè)項(xiàng)目的兩個(gè) vue 文件的樣式產(chǎn)生了沖突~
所以，我們可以初步知道了，data-v-xxx這個(gè)屬性是根據(jù) vue文件相對(duì)路徑去計(jì)算出來的。但這也只是初步而已，具體我們還得去看一下源碼才行，這樣才能鍛煉我們解決問題的能力~
先來看看 Webpack + vue-loader 對(duì) Vue2 是怎么處理的，源碼鏈接：https://github.com/vuejs/vue-loader/blob/8357e071c45e77de0889a9feedf2079a327f69d4/src/index.ts#L142
再來看看 vite + @vitejs/plugin-vue 對(duì)于 Vue3是怎么處理的，源碼鏈接：https://github.com/vitejs/vite-plugin-vue/blob/main/packages/plugin-vue/src/utils/descriptorCache.ts
其實(shí)兩種的解析方式大差不差，總結(jié)為以下：
所以可以看出在開發(fā)環(huán)境和生產(chǎn)環(huán)境的時(shí)候，都有可能兩個(gè) vue 文件的 scoped style 樣式發(fā)生沖，雖然這只是比較邊界的情況~
為什么生產(chǎn)環(huán)境不把文件內(nèi)容加入計(jì)算呢？我想應(yīng)該是因?yàn)殚_發(fā)階段文件內(nèi)容變化的比較頻繁，所以如果把文件內(nèi)容加入計(jì)算的話，勢必會(huì)造成構(gòu)建時(shí)間的加長。
雖然 scoped style 發(fā)生樣式?jīng)_突只是小概率事件，但是我們也得思考一下怎么去避免呢？
掘金有一個(gè)大佬，給 Vue 官方提了一個(gè) PR，就是在計(jì)算 data-v-xxx的時(shí)候，加入 package.json 的 name進(jìn)行計(jì)算，也就是項(xiàng)目名，這樣能防止兩個(gè)不同項(xiàng)目之間的樣式?jīng)_突~
大佬牛啊！！！
本文鏈接：http://www.www897cc.com/showinfo-26-78653-0.htmlVue 的 style 加了 scoped 也會(huì)樣式?jīng)_突？可怕！
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)