A. vue項目實現動態路由和動態菜單搭建插件式開發框架免費源碼
以往我們在開發vue項目的時候，總是通過將路徑和路由寫在route/index.js文件中，然後直接進行訪問即可，一般實現許可權匹配都是通過菜單下面的許可權參數和路由守衛進行一個驗證攔截和許可權匹配，然而這樣安全性仍然不足。因為我們在route/index.js中已經寫滿了所有的路由，這樣子不僅造成靜態路由內容過多、修改困難，同時當靜態路由內容過多的時候，我們在路由中的內容就顯得極其復雜。
而後端對前端的控制也顯得較為無力，無法實現嚴格性的控制。
由此我們發現通過動態路由控制是必然的，此時我們只需要通過後端獲取數據菜單和路由信息json，然後動態添加路由並生成菜單，使菜單與動態路由內容進行一個匹配，這樣子我們可以實現由後端控制前端的菜單和路由，我們的項目往往只需要內置幾個組件無需許可權的公共頁面如登陸、注冊、忘記密碼和404錯誤這幾個常用頁面組件。
我們只需要將寫好的組件放置到我們的view視圖下，然後我們通過動態的路由和菜單實現路由添加和菜單進行匹配，我們便可實現對插件進行訪問，我們減少了對route/index.js內容寫入，同時也有利於減少內存的佔用。
我們通過動態路由的形式，我們生成的菜單許可權更加的完善，不僅實現依靠菜單與路由守衛攔截實現鑒權，也可以通過動態路由實現動態載入vue文件，控制更加深度
我們通過動態路由的形式，我們可以將項目分給不同的人進行完成，便於組建一個開發團隊，因為他們所開發的組件，我們只需要在具備基本的javascript庫的情況下。我們直接進行動態路由的一個掛載和菜單生成便可完成項目合作，減少了對route/index.js文件的操作，保證項目的完整性。
最後我發現在非node環境的開發條件下，我們可以實現遠程的vue文件載入，這不僅為我們開發提供了便利，同時也有利於我們及時修改文件，以達到項目的需求，更有利於保障安全，實現伺服器vue文件載入。
Vue：2.6.11。
Vue-route：3.2.0。
主頁
聊天
第一通過後端返回的一個路由json數據，我們通過前端生成符合路由路由靜態內容數組的一個數組，然後再通過addRoute進行一個循環添加，我們以此生成動態路由。在登陸時獲取後端返回的菜單信息，我們進行菜單的一個循環生成，由此我們的一個動態項目就已經完成。
第二怎樣對動態路由和菜單項目進行一個管理。
我們首先可以通過搭建一個組件通過添加路由信息和管理菜單實現二者的動態匹配。我們只需要對路由信息進行一個添加和修改，並和菜單相互間進行匹配，我們便可實現簡單的路由掛載。
組件管理
菜單管理
此時將數據提交的後端由後端進行數據保存，我們此時的組件只需要放在views文件夾下，添加路由進行文件載入，我們便可實現路由管理。
第一登陸頁面配置。
我們需要在靜態文件夾下創建一個menu.json和route.json。兩個json文件模擬伺服器登錄時返回的數據。
我們在登錄頁面模擬獲取數據之後，我們通過菜單的一個方法進行生成菜單，通過路由的方法生成路由數組並進行循環添加，然後執行路由跳轉。
第二配置路由初始化內容。我們將route/index.js的路由信息填為空是非常不理智的，而且會報錯，因為路由初始化在載入前已經完成。有些頁面完全不需要許可權便可訪問，比如登錄、注冊、找回密碼和404錯誤，這種不需要許可權的頁面，我們還是需要將其直接以靜態的形式寫在route/index.js文件中。
Index初始數據
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue . use ( VueRouter )
const routes = [{
path: '/' , //訪問url
name: 'login' , //路由名稱
component : () => import ( '@/unitui/pages/Login.vue' ), //載入模板文件
meta: {
show_site: 0 , //是否全屏顯示
web_title: "登錄" //網站標題
}
},
{
path: '/register' , //訪問url
name: 'register' , //路由名稱
component : () => import ( '@/unitui/pages/Register.vue' ), //載入模板文件
meta: {
show_site: 0 , //是否全屏顯示
web_title: "注冊" //網站標題
}
},
{
path: '/forget' , //訪問url
name: 'forget' , //路由名稱
component : () => import ( '@/unitui/pages/Forget.vue' ), //載入模板文件
meta: {
show_site: 0 , //是否全屏顯示
web_title: "找回密碼" //網站標題
}
},
{
path: '/404' , //訪問url
name: '404' , //路由名稱
component : () => import ( '@/unitui/pages/404.vue' ), //載入模板文件
meta: {
show_site: 0 , //是否全屏顯示
web_title: "404錯誤" //網站標題
}
},
]
const router = new VueRouter ({
routes
})
router . beforeEach (( to , from , next ) => {
document . title = to . meta . web_title
console . log ( to );
next ()
})
export default router
第三，關於防止刷新後丟失的問題。我們需要在app.vue文件中的methods方法中定義一個路由生成方法。
示例：
init_route () { //初始化路由，防止刷新丟失
if ( sessionStorage . getItem ( "route_data" ) != null ) { //只有後端已經返回數據的情況下才允許生成
const route_data = JSON . parse ( sessionStorage . getItem ( "route_data" )); //獲取路由信息
const data = []; //默認路由數組
for ( let index = 0 ; index < route_data . length ; index ++) { //生成路由信息
data [ index ] = {
path: route_data [ index ]. path , //訪問url
name: route_data [ index ]. name , //路由名稱
component : resolve =>
require ([ `@/views/ ${ route_data [ index ]. component } ` ], resolve ), //載入模板文件
meta: {
show_site: route_data [ index ]. meta . show_site , //是否全屏顯示
web_title: route_data [ index ]. meta . web_title //網站標題
}
};
}
for ( let index = 0 ; index < data . length ; index ++) { //循環添加路由
this . $router . addRoute ( data [ index ]);
}
}
}
在mounted中進行方法調用，防止刷新的時路由丟失，導致發生錯誤。該方法內容基本和登陸頁面的菜單出路由初始內容基本相同，但我們唯一差別的是，我們需要判斷登陸所獲取的路由信息是否存在，只有在存在的時候及後端已經返回了路由信息，即證明登錄成功的時候，我們才會動態添加路由。
第一在刷新之後，默認跳轉到path:』*』的一個路由界面中去，此時我們解決方法只需要將path:』*』路由進行一個刪除,將其刪除就變可正常訪問。
第二動態路由跳轉時發生Cannot find mole xxx錯誤。
意思是無法載入我們指定的一個vue文件，這是由於route3.0版本後import方式不支持傳入變數，此時我們只需要將其改為require方式便可。
我們此次動態vue項目開發已經基本完成，我的開發的項目是基於element-ui進行，那麼如果你需要源碼參考。可以私信回復unit便可獲取。
B. vue-lazyload 源碼解析
/src/lazy.js
定義變數接收實例化參數。
lazy.js 默認導出一個函數，該函數返回一個 Lazy 類，形成閉包，保持對 Vue 的引用。
判斷是否支持Webp圖片
/src/listener.js
定義變數接收實例化參數。
filter 方法將配置的 filter 對象中的方法執行，接收兩個參數，一個為 ReactiveListener 實例，一個為 options 參數對象。
initState 方法給元素添加 data-set 屬性，值為圖片地址 src，並且定義了圖片狀態對象 state 。在 Lazy 中已經根據像素比選擇了最適配屏幕的圖片，顧這里不需要考慮 srcset 屬性。另外，我們自定義指令是 v-lazy，到目前為止，還沒有給圖片的 src 屬性賦值。
render 方法，是在 Lazy 中實例化 ReactiveListener 時傳遞過來的參數。
回過頭再來結合 lazy.js 中的 lazyLoadHandler 方法與 ReactiveListener 暴露的方法來看。
/src/lazy-container.js
LazyContainer 的核心是 container 下的選擇器selector(默認 img 標簽)遍歷後調用 lazy 的 add 方法進行綁定，自定義指令 v-lazyload-container。
/src/lazy-component.js
上述實現元素綁定主要是通過自定義指令 v-lazy ， v-lazy-container 。那麼 LazyComponent 則是通過注冊的 lazy-component 組件，完成綁定，默認渲染成為 div 標簽，作為 img 的容器。
/src/lazy-image.js
通 LazyComponent 組件，只不過 LazyImage 注冊的 lazy-image 組件，渲染成的是 img 標簽，多了 src 屬性。
通過自定義指令 v-lazy 將設置背景圖的元素或者 img元素，通過 _addListenerTarget 方法收集與數組 TargetQueue 中，並遍歷觸發懶載入的方法， addEventListener 綁定在該元素上，觸發的事件為 lazyLoadHandler ；
在需要懶載入的元素上設置屬性 data-src ，這是期望的圖片地址(filter 配置項可以預先過濾賦值)，元素上自定義 lazyLoad 表示圖片狀態(狀態變更後，adapter 中觸發回調)；
ListenerQueue 數組中收集的是 ReactiveListener 類的實例，主要是用於懶載入不同狀態下的圖片載入，loading - loaded - error；
當觸發 EventListener 了，執行 lazyLoadHandler 方法，根據演算法，進入 viewport 後， ReactiveListener 元素如果與觸發元素匹配，則進行圖片的載入及渲染。
C. 這種VUE代碼 是怎麼寫的
應該是打包工具自動生成的吧。
像這種代碼類似庫源碼，是挺難閱讀的。
D. 【面試題解析】從 Vue 源碼分析 key 的作用
最近看了面試題中有一個這樣的題， v-for 為什麼要綁定 key？
Vue 中 key 很多人都弄不清楚有什麼作用，甚至還有些人認為不綁定 key 就會報錯。
其實沒綁定 key 的話，Vue 還是可以正常運行的，報警告是因為沒通過 Eslint 的檢查。
接下來將通過源碼一步步分析這個 key 的作用。
Virtual DOM 最主要保留了 DOM 元素的層級關系和一些基本屬性，本質上就是一個 JS 對象。相對於真實的 DOM，Virtual DOM 更簡單，操作起來速度更快。
如果需要改變 DOM，則會通過新舊 Virtual DOM 對比，找出需要修改的節點進行真實的 DOM 操作，從而減小性能消耗。
傳統的 Diff 演算法需要遍歷一個樹的每個節點，與另一棵樹的每個節點對比，時間復雜度為 O(n²)。
Vue 採用的 Diff 演算法則通過逐級對比，大大降低了復雜性，時間復雜度為 O(n)。
VNode 更新首先會經過 patch 函數， patch 函數源碼如下：
vnode 表示更新後的節點，oldVnode 表示更新前的節點，通過對比新舊節點進行操作。
1、vnode 未定義，oldVnode 存在則觸發 destroy 的鉤子函數
2、oldVnode 未定義，則根據 vnode 創建新的元素
3、oldVnode 不為真實元素並且 oldVnode 與 vnode 為同一節點，則會調用 patchVnode 觸發更新
4、oldVnode 為真實元素或者 oldVnode 與 vnode 不是同一節點，另做處理
接下來會進入 patchVnode 函數，源碼如下：
1、vnode 的 text 不存在，則會比對 oldVnode 與 vnode 的 children 節點進行更新操作
2、vnode 的 text 存在，則會修改 DOM 節點的 text
接下來在 updateChildren 函數內就可以看到 key 的用處。
key 的作用主要是給 VNode 添加唯一標識，通過這個 key，可以更快找到新舊 VNode 的變化，從而進一步操作。
key 的作用主要表現在以下這段源碼中。
updateChildren 過程為：
1、分別用兩個指針（startIndex, endIndex）表示 oldCh 和 newCh 的頭尾節點
2、對指針所對應的節點做一個兩兩比較，判斷是否屬於同一節點
3、如果4種比較都沒有匹配，那麼判斷是否有 key，有 key 就會用 key 去做一個比較；無 key 則會通過遍歷的形式進行比較
4、比較的過程中，指針往中間靠，當有一個 startIndex > endIndex，則表示有一個已經遍歷完了，比較結束
從 VNode 的渲染過程可以得知，Vue 的 Diff 演算法先進行的是同級比較，然後再比較子節點。
子節點比較會通過 startIndex、endIndex 兩個指針進行兩兩比較，再通過 key 比對子節點。如果沒設置 key，則會通過遍歷的方式匹配節點，增加性能消耗。
所以不綁定 key 並不會有問題，綁定 key 之後在性能上有一定的提升。
綜上，key 主要是應用在 Diff 演算法中，作用是為了更快速定位出相同的新舊節點，盡量減少 DOM 的創建和銷毀的操作。
希望以上內容能夠對各位小夥伴有所幫助，祝大家面試順利。
Vue 的文檔中對 key 的說明如下：
關於就地修改，關鍵在於 sameVnode 的實現，源碼如下：
可以看出，當 key 未綁定時，主要通過元素的標簽等進行判斷，在 updateChildren 內會將 oldStartVnode 與 newStartVnode 判斷為同一節點。
如果 VNode 中只包含了文本節點，在 patchVnode 中可以直接替換文本節點，而不需要移動節點的位置，確實在不綁定 key 的情況下效率要高一丟丟。
某些情況下不綁定 key 的效率更高，那為什麼大部分Eslint的規則還是要求綁定 key 呢？
因為在實際項目中，大多數情況下 v-for 的節點內並不只有文本節點，那麼 VNode 的位元組點就要進行銷毀和創建的操作。
相比替換文本帶來的一丟丟提升，這部分會消耗更多的性能，得不償失。
了解了就地修改，那麼我們在一些簡單節點上可以選擇不綁定 key，從而提高性能。
如果你喜歡我的文章，希望可以關注一下我的公眾號【前端develop】
E. 面試中的網紅Vue源碼解析之虛擬DOM，你知多少呢深入解讀diff演算法
眾所周知，在前端的面試中，面試官非常愛考dom和diff演算法。比如，可能會出現在以下場景
滴滴滴，面試官發來一個面試邀請。接受邀請📞
我們都知道， key 的作用在前端的面試是一道很普遍的題目，但是呢，很多時候我們都只浮於知識的表面，而沒有去深挖其原理所在，這個時候我們的競爭力就在這被拉下了。所以呢，深入學習原理對於提升自身的核心競爭力是一個必不可少的過程。
在接下來的這篇文章中，我們將講解面試中很愛考的虛擬DOM以及其背後的diff演算法。 請認真閱讀本文～文末有學習資源免費共享！！！
虛擬DOM是用JavaScript對象描述DOM的層次結構。DOM中的一切屬性都在虛擬DOM中有對應的屬性。本質上是JS 和 DOM 之間的一個映射緩存。
要點：虛擬 DOM 是 JS 對象；虛擬 DOM 是對真實 DOM 的描述。
diff發生在虛擬DOM上。diff演算法是在新虛擬DOM和老虛擬DOM進行diff（精細化比對），實現最小量更新，最後反映到真正的DOM上。
我們前面知道diff演算法發生在虛擬DOM上，而虛擬DOM是如何實現的呢？實際上虛擬DOM是有一個個虛擬節點組成。
h函數用來產生虛擬節點（vnode）。虛擬節點有如下的屬性：
1）sel： 標簽類型，例如 p、div；
2）data： 標簽上的數據，例如 style、class、data-*；
3）children ：子節點；
4） text： 文本內容；
5）elm：虛擬節點綁定的真實 DOM 節點；
通過h函數的嵌套，從而得到虛擬DOM樹。
我們編寫了一個低配版的h函數，必須傳入3個參數，重載較弱。
形態1：h('div', {}, '文字')
形態2：h('div', {}, [])
形態3：h('div', {}, h())
首先定義vnode節點，實際上就是把傳入的參數合成對象返回。
[圖片上傳失敗...(image-7a9966-1624019394657)]
然後編寫h函數，根據第三個參數的不同進行不同的響應。
當我們進行比較的過程中，我們採用的4種命中查找策略：
1）新前與舊前：命中則指針同時往後移動。
2）新後與舊後：命中則指針同時往前移動。
3）新後與舊前：命中則涉及節點移動，那麼新後指向的節點，移到 舊後之後 。
4）新前與舊後：命中則涉及節點移動，那麼新前指向的節點，移到 舊前之前 。
命中上述4種一種就不在命中判斷了，如果沒有命中，就需要循環來尋找，移動到舊前之前。直到while(新前<=新後&&舊前<=就後)不成立則完成。
如果是新節點先循環完畢，如果老節點中還有剩餘節點(舊前和舊後指針中間的節點)，說明他們是要被刪除的節點。
如果是舊節點先循環完畢，說明新節點中有要插入的節點。
1.什麼是Virtual DOM 和Snabbdom
2.手寫底層源碼h函數
3.感受Vue核心演算法之diff演算法
4.snabbdom之核心h函數的工作原理
1、零基礎入門或者有一定基礎的同學、大中院校學生
2、在職從事相關工作1-2年以及打算轉行前端的朋友
3、對前端開發有興趣人群
F. vue3源碼分析-實現props,emit，事件處理等
>
本期來實現， setup裡面使用props,父子組件通信props和emit等 ，所有的源碼請查看
在render函數中， 可以通過this,來訪問setup返回的內容，還可以訪問this.$el等
由於是測試dom,jest需要提前注入下面的內容，讓document裡面有app節點，下面測試用例類似在html中定義一個app節點哦
本功能的測試用例正式開始
上面的測試用例
解決這兩個需求:
針對上面的分析，需要在setupStatefulComponent中來創建proxy並且綁定到instance當中,並且setup的執行結果如果是對象，也已經存在instance中了，可以通過instance.setupState來進行獲取
通過上面的操作，從render中this.xxx獲取setup返回對象的內容就ok了，接下來處理el
需要在mountElement中，創建節點的時候，在vnode中綁定下，el，並且在setupStatefulComponent 中的代理對象中判斷當前的key
看似沒有問題吧，但是實際上是有問題的，請仔細思考一下， mountElement是不是比setupStatefulComponent 後執行，setupStatefulComponent執行的時候，vnode.el不存在，後續mountelement的時候，vnode就會有值，那麼上面的測試用例肯定是報錯的，$el為null
解決這個問題的關鍵，mountElement的載入順序是 render -> patch -> mountElement，並且render函數返回的subtree是一個vnode,改vnode中上面是mount的時候，已經賦值好了el,所以在patch後執行下操作
在vue中，可以使用onEvent來寫事件，那麼這個功能是怎麼實現的呢，咋們一起來看看
在本功能的測試用例中，可以分析以下內容：
解決問題:
這個功能比較簡單，在處理prop中做個判斷， 屬性是否滿足 /^on[A-Z]/i這個格式，如果是這個格式，則進行事件注冊，但是vue3會做事件緩存，這個是怎麼做到？
緩存也好實現，在傳入當前的el中增加一個屬性 el._vei || (el._vei = {}) 存在這里，則直接使用，不能存在則創建並且存入緩存
事件處理就ok啦
父子組件通信，在vue中是非常常見的，這里主要實現props與emit
根據上面的測試用例，分析props的以下內容：
解決問題：
問題1： 想要在子組件的setup函數中第一個參數， 使用props,那麼在setup函數調用的時候，把當前組件的props傳入到setup函數中即可 問題2： render中this想要問題，則在上面的那個代理中，在 加入一個判斷，key是否在當前instance的props中 問題3： 修改報錯，那就是只能讀，可以使用以前實現的 api shallowReadonly來包裹一下 既可
做完之後，可以發現咋們的測試用例是運行沒有毛病的
上面實現了props,那麼emit也是少不了的，那麼接下來就來實現下emit
根據上面的測試用例，可以分析出：
解決辦法： 問題1： emit 是setup的第二個參數， 那麼可以在setup函數調用的時候，傳入第二個參數 問題2： 關於emit的第一個參數， 可以做條件判斷，把xxx-xxx的形式轉成xxxXxx的形式，然後加入on，最後在props中取找，存在則調用，不存在則不調用 問題3：emit的第二個參數， 則使用剩餘參數即可
到此就圓滿成功啦！