vue源碼逐行解析

『壹』 vue源碼解析(5)-update

在$mount函數中，主要是調用了mountComponent函數，最終該函數調用了updateComponent函數。updateComponent函數的核心作用是vm._update方法，它的主要目的是將vnode渲染成為真正的dom。我們本次分析的重點是首次渲染過程中的update方法，該方法的定義位於src/core/instance/lifecycle.js。

首先回顧整個過程，定義一些用於數據更新的變數，如prevVnode等。因為此時為空，所以進入vm._patch_方法。這個方法的定義位於src/platforms/web/runtime/index.js，作用是判斷當前環境是否為瀏覽器，如果有patch函數則執行，否則返回空函數。

我們再看patch方法的具體定義，它位於src/platforms/web/runtime/patch.js。patch方法實際調用了createPatchFunction，傳入了nodeops和moles兩個參數。nodeops是一些操作dom的方法，而moles定義了類的一些鉤子函數，這些函數會在patch過程中被調用。

createPatchFunction函數定義在src/core/vdom/patch.js。它會首先拿到moles，然後遍歷並執行各個階段的鉤子函數。這些階段包括create、activate、update、remove、destroy等。最後，該函數會返回patch函數。

因此，我們調用vm._patch_函數最終就是調用這個patch函數。注意，與平台相關的代碼都託管在src/platforms目錄下。在Web和Weex環境中，它們將虛擬DOM映射到「平台DOM」的方法不同，並且對「DOM」包括的屬性模塊的創建和更新也不盡相同。因此，每個平台都有各自的nodeOps和moles，它們的代碼需要託管在src/platforms這個大目錄下。

而不同平台的patch方法的主要邏輯部分是相同的，這部分公共部分託管在core這個大目錄下。差異化部分只需要通過參數來區別，這里用到了函數柯里化的技巧，通過createPatchFunction提前固化了差異化參數，這樣每次調用patch函數時不必都傳遞nodeOps和moles。patch方法本身接收4個參數，oldVnode表示舊的VNode節點，vnode表示執行_render後返回的VNode節點，hydrating表示是否是服務端渲染，removeOnly是給transition-group用的。

接下來分析patch函數的實現。首先判斷vnode和oldVnode，因為isRealElement為true，所以進入相應的代碼塊。進一步判斷舊節點的類型和是否為服務端渲染，最終執行到emptyNodeAt函數，它將真實的DOM轉化為vnode。createElm函數負責通過虛擬節點創建真實的DOM並插入到父節點中，createComponent方法嘗試創建子組件。接著，判斷vnode是否包含tag，如果包含，先進行非生產環境下的合法性校驗，然後調用平台DOM操作創建佔位符元素。

在createElm函數中，主要功能是將構建的DOM子節點插入到父節點中，直到沒有子節點為止。這個過程與createChildren函數一起完成。createChildren函數用於處理矩陣形式的子節點，調用createElm函數創建DOM節點並插入到父節點。如果子節點是文本節點且不是最後一個節點，則直接插入到DOM節點後面。遞歸調用createElm函數是一種常用的深度優先遍歷演算法。

在完成創建和插入DOM節點後，執行所有create鉤子函數，並將vnode推入insertedVnodeQueue中。最後，調用insert方法將DOM插入到父節點中。因為是遞歸調用，子元素優先調用insert，所以整個vnode樹節點的插入順序是先子後父。

實例的私有方法_update主要是調用了patch函數，patch函數的核心功能是將vnode轉換為DOM節點然後渲染在視圖中。為了生成DOM節點，需要判斷vnode是否有子節點，遞歸直到沒有子節點。然後創建子節點並插入到父節點中。最後，將原來定義的根節點移除，因為已經重新建立了新的節點替換原來的根節點。

『貳』 Vue2.6x源碼解析（一）：Vue初始化過程

Vue2.6x源碼解析（一）：Vue初始化過程

Vue.js的核心代碼在src/core目錄，它在任何環境都能運行。項目入口通常在src/main.js，引入的Vue構造函數來自dist/vue.runtime.esm.js，這個文件導出了Vue構造函數，允許我們在創建Vue實例前預置全局API和原型方法。

初始化前，Vue構造函數在src/core/instance/index.js中定義，它預先掛載了全局API如set、delete等。即使不通過new Vue初始化，Vue本身已具備所需功能。

當執行new Vue時，實際上是調用了_init方法，這個過程會在src/core/index.js的initGlobalAPI(Vue)中初始化全局API和原型方法。接著，組件實例的初始化與根實例基本一致，包括組件構造函數的定義，以及組件的生命周期、渲染和掛載。

組件初始化過程中，關鍵步驟包括數據轉換為響應式、事件注冊和watcher的創建。例如，組件的渲染函數會觸發渲染方法，而watcher的更新則通過非同步更新隊列機制確保性能。

在開發環境，Vue-template-compiler插件負責模板編譯，然後runtime中的$mount方法負責實際的渲染和掛載。整個過程涉及組件的構建、渲染函數生成、依賴響應式數據的更新和非同步調度。