>[success] # Vue -- $mount 模板編譯階段 * 注先跳過初始化的其他階段，先分析'模板編譯階段' ~~~ 1.配合生命周期圖和對'initMixin' 方法中最后一段的代碼，可以理解下一步需要分析'模板編譯階段' if (vm.$options.el) { vm.$mount(vm.$options.el) } ~~~  >[danger] ##### 拋出幾個問題 ~~~ 1.在利用'vue-cli3.0'搭建項目時候，一般生成的入口文件代碼如下 import Vue from "vue"; import App from "./App.vue"; Vue.config.productionTip = false; new Vue({ render: h => h(App) }).$mount("#app"); 在這種非構建項目頁面常見的用法： var vm = new Vue({ // 也可以綁定document.getElementById('app')返回的app對象 el: "#app", data: { msg: "第一個案例" } }) 這兩種區別在哪里？ 2.vue在使用的時候我們要綁定根節點，一般是在el屬性，綁定聲明的id，那還有其他方法可以綁定么？ 3.vue 在綁定的時候可以綁定在'body' 和'html' 標簽上么？ ~~~ >[info] ## 開始分析編譯階段的源碼 ~~~ 1.首先，要明確第一點，寫到這里的時候我還沒學到react，但從已經知道信息來說，React是沒有模板的，直接就是一 個渲染函數，它中間返回的就是一個虛擬DOM樹 2.Vue這里我先拋開通過'vue-loader'來做的項目（就例如你用vue腳手架，或者用webpack時候使用了'vue-loader'） ，除此之外作為vue使用的開發大部分時間我們是寫模板(可以理解正常html方式)，這全得益于: 'Vue的編譯器在編譯模板之后，會把這些模板編譯成一個渲染函數'而函數被調用的時候就會渲染并且返回一個虛擬 DOM的樹 3.通過這里可以發現Vue為什么可以好上手主要原因也得益于不需要我們去寫渲染函數內部轉換機制可以幫我們解決 這個問題，當然你也可以直接寫渲染函數，這樣直接可以跳過vue幫忙轉換的這部分 4.現在新的問題是vue 和react 為什么會選擇使用'渲染函數' 這種解決方案？這里就不得不說 '在瀏覽器當中，JavaScript的運算在現代的引擎中非常快，但DOM本身是非常緩慢的東西' 當你調用原生DOM API的時候，瀏覽器需要在JavaScript引擎的語境下去接觸原生的DOM的實現， 這個過程有相當的性能損耗。所以，本質的考量是，要把耗費時間的操作盡量放在純粹的計算中去做， 保證最后計算出來的需要實際接觸真實DOM的操作是最少的。 5.解答一下第四條，正式因為如此Vue 和react 選擇使用'渲染函數'， '函數被調用的時候就會渲染并且返回一個虛擬DOM的樹',渲染函數（jsx）實際就是一套用于讓我們更簡單地去 描述樹狀結構的語法糖。 6.引入了新的概念虛擬DOM，什么是虛擬DOM？ '所謂虛擬DOM，就是用一個JS對象來描述一個DOM節點',我們把組成一個DOM節點的必要東西通過一個 JS對象表示出來，那么這個JS對象就可以用來描述這個DOM節點，我們把這個JS對象就稱為是這個真實 DOM節點的虛擬DOM節點。例如： <div class="a" id="b">我是內容</div> { tag:'div', // 元素標簽 attrs:{ // 屬性 class:'a', id:'b' }, text:'我是內容', // 文本內容 children:[] // 子元素 } 7.Vue'有了這個虛擬的樹之后，再交給一個patch函數，負責把這些虛擬DOM真正施加到真實的DOM上'，這樣 原本直接操作真實DOM是非常消耗性能方式，我們利用虛擬dom節點這種方式，用JS的計算性能來換取操作 DOM所消耗的性能，我們可以簡單的描述一下vue 這個過程： Vue有自身的響應式系統來偵測在渲染過程中所依賴到的數據來源。在渲染過程中，偵測到的數據來源之后， 之后就可以精確感知數據源的變動。到時候就可以根據需要重新進行渲染。當重新進行渲染之后，會生成 一個新的樹，將新樹與舊樹進行對比，就可以最終得出應施加到真實DOM上的改動。最后再通過patch函數 施加改動。 ~~~ * vue 使用模板的時候vue內部幫我們做的  * vue 模板渲染過程 ：模板 → 渲染函數 → 虛擬DOM樹 → 真實DOM  * 參考文章 [Vue作者尤雨溪：Vue 2.0，漸進式前端解決方案 ](https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247485737&idx=1&sn=14fe8a5c72aaa98c11bf6fc57ae1b6c0&source=41#wechat_redirect) >[danger] ##### 官方文檔內容 [模板編譯](https://cn.vuejs.org/v2/guide/render-function.html#%E6%A8%A1%E6%9D%BF%E7%BC%96%E8%AF%91)