代碼編輯不夠友好，為更好一點的閱讀體驗，還是推薦原文鏈接：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 也經過相同的轉換流程。可以想象，最終 template 中的根結點在插入 body 中時，其 DOM 元素已經是一個完整的 DOM 樹了。

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

總結

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

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

總結

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

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