Vue執行流程解析

引言

相信絕大多數的前端小夥伴已記不清做了多少專案，寫了多少**了，每個人如同教科書般地寫著vue**：

// 單檔案元件中常見**
export default 
},methods: 
}}

// 入口檔案中的常見**
new vue()

一切都顯得那麼自然。不過在百忙之中是否有小夥伴想過，乙個小小的vue例項怎麼有這麼大的能量，竟然可以構建出如此複雜的前端專案。那麼vue內部是如何運轉的呢，做了哪些事情呢，從今天開始跟著我一**竟。

vue是可以執行在多平台上的如瀏覽器，weex等，本文只分析vue在瀏覽器環境下的主線執行流程。

我們先看一下vue的建構函式：

// vue建構函式
function vue (options) 
// 執行初始化邏輯
this._init(options)
}

從vue的建構函式中可以看到，當我們執行new vue()的時候，只執行了乙個_init方法。_init會根據傳入的選項對vue進行初始化。props、data、生命週期，事件機制的初始化都是在此過程中完成的。

以data的初始化為例，vue會通過object.defineproperty的方式將data的屬性定義到vue例項上。這也就解釋了為什麼我們可以在vue中通過對this.msg進行賦值，可以修改data中屬性的值了。

以上對data的處理只是剛剛開始。為了能實現所謂的響應式或者資料驅動更新，vue又做了進一步的處理，具體做法是，建立乙個observer物件，該物件與data繫結，通過object.defineproperty將data中的所有的屬性轉換成getter/setter。當data中的屬性在vue例項中被訪問（會觸發getter），observer物件就會把該屬性收集為watcher例項的依賴，之後當data中的屬性在vue例項中被改變（會觸發setter），observer會通知依賴該屬性的watcher例項重新渲染頁面。

注：每個watcher都對應乙個vue例項

以上處理流程串在一起，vue就實現了通過修改this.msg從而觸發頁面的自動更新。

模板解析

通過上面的分析，我們已經知道當資料發生變化時，會觸發頁面的重新渲染。接下來我們分析下vue是如何進行渲染的。

首先，vue會把將我們編寫的html模板解析成乙個ast描述物件，該物件是通過children和parent鏈結而成的樹形結構，完整地描述了html標籤的所有資訊。

例如有如下html模板:

最終會解析成如下形式的ast物件：

,
children: ,
end: 33,
parent: ,
plain: true,
pre: undefined,
rawattrsmap:{},
start: 19
tag: "p",
type: 1
}],end: 263,
parent: undefined,
plain: false,
start: 0
tag: "div",
type: 1
}

然後vue根據ast物件生成render函式，該函式的函式體大致如下：

with(this)

也就是說，我們的模板最終在vue內部都是會以乙個render函式的形式存在。

vue官網上對此也有提及，一般推薦大家使用template，el等方式來指定模板，此外還可以通過使用render來自定義個性化的編譯函式，不過vue內部最終都會解析成render函式。

我們得到render函式之後，vue並未直接渲染成dom樹，而是先通過render函式得到乙個vnode。實際上這一步是非常有必要的，我們都知道頻繁大量地操作dom節點是極耗效能的。vue在渲染之前通過對vnode的比較，可以大大規避非必要的dom操作。下面是乙個vnode大致結構：

],
parent: undefined,
context: vue例項,
...}

最後，vue根據diff之後的結果，執行真正的dom節點的插入更新刪除等操作，同時觸發vue例項的生命週期鉤子函式。之後，vue要做的就是觀察資料的變化，進而決定是否重新渲染頁面了。

以上就是vue在初始渲染過程中的主幹流程，大體總結起來就是先對選項物件初始化，通過object.defineproperty建立一套響應式系統，然後將模板解析成render函式，然後使用render函式生成vnode，在渲染前，對vnode進行diff操作，最後進行必要的渲染。

本文並未深入每個執行中的**細節，接下來會詳細對初始化、響應式實現原理、模板渲染、指令解析、vnode的diff等進行介紹，敬請期待。

推薦閱讀

好文我在看

Vue執行流程解析

mysql解析流程 mysql執行流程解析

執行vue專案流程

Mina執行流程解析（一）

Vue執行流程解析

mysql解析流程 mysql執行流程解析

執行vue專案流程

Mina執行流程解析（一）

相關推薦