代碼編輯不夠友好，為更好一點的閱讀體驗，還是推薦原文鏈接：https://www.yuque.com/longtengsong/blog/bu09tk

DOM 樹是 vue 在構建實例的時候，通過 $mount 函數創建出來的。那么 DOM 創建過程是怎樣的呢？

步驟一：執行 render 函數

$mount 函數執行時，實際調用的是：?vm._update(vm._render(), hydrating)?。

從上圖中可以看到，模版被編譯為一個render函數，render 函數執行最終目的就是將?template?轉換為?vnode?。

步驟二：執行 update 函數

從 _update 源碼可以看出，如果初次渲染，即?initial render，則走?vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)?這個分枝，而?vm.$el = vm.__patch__(prevVnode, vnode)?則是組件更新時執行的分枝。這里我們先專注于初次渲染的分枝。

通過?Vue.prototype.__patch__?函數定義，層層查找，最終 patch 進入我們視野，通過分析?createElm?便是DOM 創建的關鍵函數。

注意，我們目前僅僅探究 vue 構建 DOM 的流程，因此僅作最簡單的考慮，上述代碼過濾了組件渲染，跨平臺、警告信息等非關鍵代碼。

很明顯，?nodeOps.createElement(tag, vnode)?將 vnode 創建為 DOM 元素，并保存為 vnode.elm 變量。最后通過 insert 將當前創建的DOM元素插入父元素中。但這之前， 通過 createChildren 就是遞歸調用?createElm，讓 children 中的 vnode 也經過相同的轉換流程?？梢韵胂?#xff0c;最終 template 中的根結點在插入 body 中時，其 DOM 元素已經是一個完整的 DOM 樹了。

由于 createChildren 在 insert 函數之前執行，也就決定了子元素生命周期函數 mounted 先于父元素的 mounted 執行。同理也可推斷子元素與父元素相同的其他生命周期函數的執行順序。

總結

結合new Vue 發生了什么這篇文章，應該能夠整體把握 vue 的數據驅動流程。這里所指數據驅動同前端領域大家談到的數據驅動一樣，就是數據與用戶界面(DOM)的一種映射算法。有了這種映射算法，就不用去關心具體的DOM創建、修改、刪除等操作，只需要關心業務邏輯帶來的數據變化。

而了解DOM樹如何被構建，就是要學習 vue 的數據驅動算法。下面以一張圖來總結該算法的流程

總結

以上是生活随笔為你收集整理的vue 如何生成一个dom元素_vue 学习心得——DOM树如何被构建的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。