本文章轉(zhuǎn)自：樂字節(jié)

文章主要講解：Vue實現(xiàn)原理

獲取更多VUE相關資料及項目可以關注：B站 小王學Java

1、Vue簡介

現(xiàn)在的大前端時代，是一個動蕩紛爭的時代，江湖中已經(jīng)分成了很多門派，主要以Vue，React還有Angular為首，形成前端框架三足鼎立的局勢。Vue在前端框架中的地位就像曾經(jīng)的jQuery，由于其簡單易懂、開發(fā)效率高，已經(jīng)成為了前端工程師必不可少的技能之一。

Vue是一種漸進式JavaScript框架，完美融合了第三方插件和UI組件庫，它和jQuery最大的區(qū)別在于，Vue無需開發(fā)人員直接操作DOM節(jié)點，就可以改變頁面渲染內(nèi)容，在應用開發(fā)者具有一定的HTML、CSS、JavaScript的基礎上，能夠快速上手，開發(fā)出優(yōu)雅、簡潔的應用程序模塊。

但是我們提及Vue的時候，更多的是關注它的用法，而不是學習它是如何解決前端問題的，這多少有點亞健康。有前端開發(fā)經(jīng)驗的人，一定在開發(fā)過程中遇到過奇奇怪怪的問題，然后稀里糊涂地解決，倘若再次遇到相似的問題，便再次手足無措，作為一名前端工程師，在遇到問題的時候我們是否能準確定位產(chǎn)生問題的原因并及時解決，主要取決于我們對前端框架的理解是否足夠深入。

2、Vue實現(xiàn)原理

2.1 虛擬DOM（Virtual DOM）

隨著時代的發(fā)展，Web應用的頁面交互效果越來越復雜，頁面功能越來越豐富，需要維護的狀態(tài)越來越多，DOM操作也越來越頻繁。DOM操作雖然簡單易用，但是會產(chǎn)生不好維護的問題。

在程序執(zhí)行的過程中，Watcher初始化時會將每一個節(jié)點和狀態(tài)進行一一關聯(lián)和映射，setter監(jiān)聽到Data的狀態(tài)發(fā)生改變后，就會通知Watcher，Watcher會將這些變化通知曾經(jīng)記錄過的DOM以及跟這些狀態(tài)相關的節(jié)點，從而觸發(fā)頁面的渲染過程。組件接收到狀態(tài)變化后，會通過編譯將模板轉(zhuǎn)換成渲染函數(shù)Render，執(zhí)行渲染函數(shù)就會得到一個虛擬DOM樹，通過對比舊的虛擬DOM和新生成的虛擬DOM樹，來更新對應的實際DOM節(jié)點，執(zhí)行頁面渲染。

主流前端框架幾乎都在使用虛擬DOM，但是在使用虛擬DOM的時候，Angular和React都無法確定具體是哪個狀態(tài)發(fā)生了變化，因此需要在舊的虛擬DOM和新的虛擬DOM之間進行暴力對比，但Vue從1.0版本開始，就通過細粒度的綁定來更新視圖，也就是說，當狀態(tài)發(fā)生變化的時候Vue可以知道具體是哪個狀態(tài)哪些節(jié)點需要發(fā)生改變，從而對這個節(jié)點執(zhí)行更新，然而這種細粒度的變化偵測會有一些內(nèi)存開銷影響性能，一個項目越復雜，開銷就越大。

Vue從2.0版本后，為了優(yōu)化性能，引入了虛擬DOM，選擇了一個折中的方案，既不需要暴力對比整個新舊虛擬DOM，也不需要通過細粒度的綁定來實現(xiàn)視圖的更新，即以組件為單位進行Watcher監(jiān)聽，也就是說即便一個組件內(nèi)有多個節(jié)點使用了某個狀態(tài)，也只需一個Watcher來監(jiān)聽這個狀態(tài)的變化，當這個狀態(tài)發(fā)生變化時，Watcher通知組件，組件內(nèi)部通過虛擬DOM的方式去進行節(jié)點的對比和重新渲染。

2.2 常用指令實現(xiàn)原理

指令是指Vue提供的以“v-”前綴的特性，當指令中表達式的內(nèi)容發(fā)生變化時，會連帶影響DOM內(nèi)容發(fā)生變化。Vue.directive全局API可以創(chuàng)建自定義指令，并獲取全局指令，除了自定義指令，Vue還內(nèi)置了一些開發(fā)過程中常用的指令，如v-if、v-for等。在Vue模板解析時，會將指令解析到AST，使用AST生成字符串的過程中實現(xiàn)指令的功能。

在解析模板時，會將節(jié)點上的指令解析出來并添加到AST的directives屬性中，directives將數(shù)據(jù)發(fā)送到VNode中，在虛擬DOM進行頁面渲染時，會觸發(fā)某些鉤子函數(shù)，當鉤子函數(shù)被觸發(fā)后，就說明指令已生效。

2.2.1 v-if指令原理

在應用程序中使用v-if指令：

在編譯階段生成：

在代碼執(zhí)行時，會根據(jù)create的值來選擇創(chuàng)建哪個節(jié)點。

2.2.2 v-for指令原理

在應用程序中使用v-for指令：

在編譯階段生成：

_l是renderList的別名，執(zhí)行代碼時，_l函數(shù)會循環(huán)list變量，調(diào)用第二個參數(shù)中傳遞的函數(shù)，傳遞兩個參數(shù)：item和index，當_c函數(shù)被調(diào)用時，會執(zhí)行_v函數(shù)，創(chuàng)建一個節(jié)點。

2.2.3 自定義指令原理

在應用程序中，指令的處理邏輯分別監(jiān)聽了create函數(shù)、update函數(shù)以及destory函數(shù)，具體實現(xiàn)如下：

鉤子函數(shù)被觸發(fā)后，會執(zhí)行updateDirectives函數(shù)，代碼如下：

在該函數(shù)中，不論是否存在舊虛擬節(jié)點，只要其中存在directives，就會執(zhí)行_update函數(shù)，_update函數(shù)代碼如下：

isCreate：判斷該虛擬節(jié)點是否是一個新建的節(jié)點。

isDistory：判斷是否刪除一個舊虛擬節(jié)點。

oldDirs：舊的指令集合，oldVnode中保存的指令。

newDirs：新的指令集合，vnode中保存的指令。

dirsWithInsert：觸發(fā)inserted指令鉤子函數(shù)的指令列表。

dirsWithPostpatch：觸發(fā)componentUpdated鉤子函數(shù)的指令列表。

通過normalizeDirectives函數(shù)將模板中使用的指令從用戶注冊的自定義指令集合中取出來的結(jié)果如下：

自定義指令的代碼為：

虛擬DOM在對比和渲染時，會根據(jù)不同情景觸發(fā)不同的鉤子函數(shù)，當使用虛擬節(jié)點創(chuàng)建一個新的實際節(jié)點時，會觸發(fā)create鉤子函數(shù)，當一個DOM節(jié)點插入到父節(jié)點時，會觸發(fā)insert鉤子函數(shù)。

callHook函數(shù)執(zhí)行鉤子函數(shù)的方式如下：

callHook函數(shù)的參數(shù)意義分別為：

dir：指令對象。

hook：將要觸發(fā)的鉤子函數(shù)名。

vnode：新的虛擬節(jié)點。

oldVnode：舊的虛擬節(jié)點。

isDestory：判斷是否刪除一個舊虛擬節(jié)點。

虛擬DOM在渲染時會觸發(fā)的所有鉤子函數(shù)及其觸發(fā)機制如下：

需要注意的是，remove函數(shù)是只有一個元素從其父元素中移除時才會觸發(fā)，如果該元素是被移除元素的子元素，則不會觸發(fā)remove函數(shù)。

感謝大家的認同與支持，小編會持續(xù)轉(zhuǎn)發(fā)《樂字節(jié)》優(yōu)質(zhì)文章