vue的生命週期

1. beforeCreate在官方文檔描述中說，在作一些數據監視和事件初始化，這裏有一個容易讓人走偏的地方，就是事件初始化，其實就是爲vue對象添加一些屬性，就是methods中的一些函數所有做爲vue對象的屬性存在，Vue會講全部的data數據和methods中的函數添加到建立的vue對象上面。
2. created 這個方法表示，vue對象已經建立成功，這裏要搞清楚vue對象並非咱們所說的虛擬dom，vue對象就是一個js對象，他內部只是對數據進行操做，經過對數據的操做進而影響到虛擬dom的構建，因此在這個方法中咱們能夠作一些數據初始化工做，最多見的就是發送ajax請求來對已經構建完畢的vue對象的靜態屬性進行一些初始化

3. compile 這個方法是正真開始構建虛擬dom，這裏值得注意的地方是，虛擬dom和真實dom的差異，說到這裏相信許多同窗跟我同樣有不少疑惑，既然已經有虛擬dom了爲何還要構建真實dom，咱們操做了虛擬dom之後直接appendChild不行嘛。答案是no， 虛擬dom並非dom,他只是描述了一個dom結構，編譯模版的過程（模版有兩種來源，這裏不述），就是根據模版的html結構來建立虛擬dom的過程，若是你們沒沒懂，那麼請看如下代碼：
   * 模版結構
   > <ul class=」list」> > <li>item 1</li> > <li>item 2</li> > </ul>
   * 根據模版結構生成的虛擬dom結構，

   >{ type: ‘ul’, props: { ‘class’: ‘list’ }, children: [ > { type: ‘li’, props: {}, children: [‘item 1’] }, > { type: ‘li’, props: {}, children: [‘item 2’] } >] }

   以上代碼時不是清晰明瞭，虛擬dom只是描述了一種數據結構，他並不表明真實的dom對象，他只是描述了一個dom tree該有的組織方式，編譯的過程就是根據模版結構生成dom數據結構的方式，高大上一點叫作虛擬dom。
   Sumarry一下：
   - Virtual DOM is any kind of representation of a real DOM （虛擬dom只是真實dom的一個表明）
   - When we change something in our Virtual DOM Tree, we get a new Virtual Tree. Algorithm compares these two trees (old and new), finds differences and makes only necessary small changes to real DOM so it reflects virtual （若是咱們在虛擬dom中對數據作了修改，咱們會獲得一個新的虛擬dom結構，算法比較這兩顆dom樹，找到不一樣之處，只須要在真實dom中作必要的修改來對應虛擬DOM）在編譯期間咱們要作的就是根據模版DOM結構來構造一個數據結構來對應模版html結構

4. beforeMount 這個過程就是根據編譯之後產生的虛擬dom結構來構造一個真實的dom結構，再說一遍，這兩個dom有很大的區別，前者只表示數據結構，後者能夠直接添加到html文檔結構中來渲染一個效果。在這個期間，咱們就能夠操做真實的dom對象了，包括咱們爲某一個特定的dom節點綁定事件，標籤屬性，內容的操做等，例如使用select2來修飾select，可是並不推薦在這裏進行一些事件綁定或者dom操做，由於在這期間，Vue還要作一件很是重要的事情就是經過Vue本身的方式來標識每個真實的dom節點，咱們在vue裏通常都是經過$els或者$refs來操做對應的dom元素，可是這期間正是標註全部元素的過程，頗有可能會出一些意想不到的錯誤。

5. mounted 見名知意，掛載，表示真實dom已經夠早完畢，咱們能夠append到父容器當中來構造頁面了，在這裏咱們就能夠完成一些對於真實dom的操做，不管是直接訪問dom的屬性內容或者事件的綁定，均可以在這裏放心大膽的作了，通常狀況下咱們不須要直接操做dom，Vue也不推薦這麼作，可是這裏你須要知道的事若是你有這種需求，徹底能夠在這裏完成，掛載的過程就是將生成的真實DOM對象append到掛載點下面，就是appendChild的過程，這個時候的虛擬dom結構根生成出來的real dom結構如出一轍，咱們之後要操做的就是這個虛擬dom結構，就是前面根據模版生成出來的dom數據結構。

6. beforeUpdate這個方法在整個生命週期之中也只被調用一次，在作什麼呢，想想上面所作的事情，上面是根據模版構造出來一個真實的dom對象，到如今他並無跟咱們的vue實例對象扯上關係，怎麼經過咱們的vue實例來影響到真實的dom對象呢，怎麼把咱們的數據綁定的真實dom當中了，之後咱們只須要操做數據就能夠影響到dom結構的渲染呢？在這個方法裏，Vue一樣依據前面的規則根據vue實例提供的數據在模版中的位置來從新生成一個虛擬dom數據結構，沒錯，你沒看錯，咱們要生成兩個虛擬dom，前一個dom只是dom結構，並無綁定咱們vue的屬性數據，這一個dom是綁定了咱們vue實例數據的dom結構，在這個dom生成的過程當中，vue根據本身的語法規則，對好比指令，表達式之類的東西進行替換，生成一個新的虛擬dom結構，接下來咱們要作什麼，我想你們應該所料不錯，沒錯，鼻孔朝天的那位同窗說的很對，就是進行比較兩個虛擬dom之間存在的差別。請不要走開，廣告以後更加精彩。。。。。

7. update，接着上一集，咱們繼續吹，這個方法在咱們整個生命週期以內會反覆調用，你會發現，每一次對vue對象的變動都會觸發update方法，他作了什麼呢，他就是在反覆的生成一個virtual dom，生成的新dom不斷跟以前的dom結構進行比對，這裏又一個比較高大上的比對算法，叫differ，我想在座各位同窗是否是有一種恍然大悟的趕腳，前面幾集我說過，Vue在beforeMount的時候會對每個dom節點進行標記，他爲了什麼嘞？ 你懂了沒有呢？不懂去面壁，Vue對每個節點進行標記就是爲了更加快速準確的定位dom節點。。。

   用一種更加清楚明瞭的總結方式就是代碼：

   // 1. 構建虛擬DOM var tree = el('div', {'id': 'container'}, [ el('h1', {style: 'color: blue'}, ['simple virtal dom']), el('p', ['Hello, virtual-dom']), el('ul', [el('li')]) ]) // 2. 經過虛擬DOM構建真正的DOM var root = tree.render() document.body.appendChild(root) // 3. 生成新的虛擬DOM var newTree = el('div', {'id': 'container'}, [ el('h1', {style: 'color: red'}, ['simple virtal dom']), el('p', ['Hello, virtual-dom']), el('ul', [el('li'), el('li')]) ]) // 4. 比較兩棵虛擬DOM樹的不一樣 var patches = diff(tree, newTree) // 5. 在真正的DOM元素上應用變動 patch(root, patches) 

   至於以後的全部方法我想就沒必要深究了，他其實就是vue實例對象生成的一個逆過程，一句話來講就是：潮水怎麼來就怎麼退去。。

8. 接着來聊一下性能問題。不少同窗可能在想既然他存在dom操做，確定性能會受到影響，可是這跟坊間傳言優勢不符啊，坊間都說虛擬dom性能高渲染快，可是爲何存在大量dom操做呢？接下來呢我就要跟你聊一聊瀏覽器的大體組成和你經過原聲js作這些適時數據綁定所要作的一些事情了。鹹鹽少量。。。
   這裏引用一位老兄在知乎上的回答，我感受說的很對也很明瞭，虛擬dom爲何很快：
   • JavaScript執行速度很快
   • Dom操做很慢Chrome剛出來的時候，在Chrome裏跑Javascript很是快，給了其它瀏覽器很大壓力。而如今通過幾輪你追我趕，各主流瀏覽器的Javascript執行速度都很快了。可是遺憾的是瀏覽器廠商只對Javascript引擎進行也極限優化，可是對html文檔結構的構建速度和css樣式的渲染並無多少進步，就是說dom引擎和css引擎的發展速度遠遠更不上js引擎解析js腳本的速度，這就比較尷尬了，由於js不少時候都是爲了操做dom節點和修飾dom，因爲html文檔結構從新排布的速度遠遠沒有js執行速度快，這在不少時候就形成了難以理解的邏輯錯誤，稱爲難以言說的痛。。。。因而在這種狀況下，虛擬dom應用而生了，虛擬dom說白了就是一個js結構的對象，他內部的數據組織方式是按照html文檔結構組成的樹狀結構，咱們經過每一次數據的修改來從新構造一個js對象，根據先後對象之間的比對就能夠發現具體那個節點發生了變化，而後在真實的dom結構中迅速的定位到元素，進行修改，最小化真實dom的重排和重繪。若是你經過原聲js，每次修改dom結構或者內容，你必須從頭至尾進行dom節點遍歷，形成很大的時間和資源的浪費，這是一點，還有一點就是每一次dom操做致使的結構從新排布，因此最好的dom操做方式是一次性把要修改的東西所有作完，進行一次性行更新。而虛擬dom作到了這一點，儘可能少操做dom，儘可能最小化dom操做，儘可能一次性操做dom，儘可能不去查詢dom。clear?