在之前的文章中講過很多相關Vnode和虛擬DOM的內容，以及生命周期,簡單地來進行總結一下。

溫故而知新，可以為師矣。

一.什么是虛擬DOM?

簡單地來說是一個JS對象，用來描述文本中DOM的一些信息。當頁面中的數據發生更新的時候會使用到虛擬DOM,我們暫且叫它是Vnode，當頁面渲染的時候也會產生一份Vnode，我們暫且叫他oldVnode。頁面中的數據更新的時候，新舊兩份Vnode會進行對比。通過Diff算法生成一份新的虛擬DOM然后在渲染到頁面上去。很大一部分上節省了性能，這也是Vue的優點,能夠操作Js對象來達到頁面的更新，脫離了直接操作DOM,大大提升了性能,以及開發的成本。

二.什么是真實DOM?

頁面中我們能夠清晰的去看見，獲取。

三.Vue組件渲染的流程和生命周期

Vue的渲染流程:

模板（template）------->編譯----------->AST------------->vnode-------------->真實的DOM

生命周期的流程:

四個階段:

初始化----------------->掛載--------------------->更新--------------------------->銷毀

在以前的文章也分析過:在beforeMount模板已經編譯完成，這樣是最后一次更改數據的機會，此時

有掛載，也不能獲取到真實的DOM，此時也不能獲取到真實DOM，到了Mount階段,編譯完成也能夠獲取道真實DOM，這也對應著Vue的渲染流程。沒

更新:

當頁面中的數據發生了更新,剛開始的真實的DOM對應著一份虛擬的Vnode，更新之后產生的一Vnode，兩個Vnode通過Diff算法，生成一份新的虛擬Dom達到最理想的渲染,此時獲取的DOM還是以前沒更新之前的。

如果想要獲取到最新的可以使用this.$nextTick(()=>{})這個api，來獲取到更新之后的最新DOM。