深入解析Vue
我們首先來熟悉一下我們這個文檔所學習內容的流程。
先對比一下jQuery和Vue的區別，再講述Vue的MVVM模型，接着講解Vue的實現流程。
當然，我是不相信沒有對比哪來的傷害，沒有傷害哪能讓人記憶深入骨髓咧，向來都是被傷害過的人我才會記得你，我要恨你一輩子 ~ ~ 哈哈，這當然是個泛詞，我們今天的重點也不是要你真的去恨誰哈，一起來看今日焦點，jQuery 和 Vue的生死之戰。
我們來看看jQuery 和 Vue 分別具有什么奪命技能，來來來，看官們看好了。
一、jQuery和Vue的區別
數據和視圖分離，解耦（就是都單獨分開來）
以數據驅動視圖，只關心數據變化，DOM被封裝
jQuery：中規中矩的JS門派的后生， 主要的技能就是操作DOM來更改數據，和用DOM來變化數據和視圖的更新，
Vue: 獨樹一派， 擁有響應式，模板引擎解析器，和渲染機制必殺技。
二、Vue的MVVM模型
Vue的MVVM模型講的是M-> model（數據模型），V-> view（視圖、模板），VM-> ViewModel，VM是M和V之間的橋梁，如果沒有VM的話，那么Vue就無法實現數據驅動視圖進行更新的操作了，
首先我們來介紹一下三者在Vue 里面的表現形式：
三者之間的綁定方式是：
View在ViewModel這個橋梁上利用DOM-listener事件綁定監聽事件，將DOM節點上發生的事件傳給model，
Model在ViewModel這個橋梁上利用Data-bindings數據綁定事件，將Model數據發生改變的事件傳給View，
這樣就實現了視圖層和數據層雙向數據綁定。
下面用一個圖來解釋一下三者相對應一個Vue 代碼中的對應的部分：
三、MVVM框架的三要素
1、響應式 ： vue如何監聽到data的每個屬性變化？
利用Object.defineProperty定義屬性，第一個參數對象，第二個屬性名
將data里面的屬性代理到vm上
利用Object.defineProperty
console.log(obj.name); // 可以監聽到 obj.name = 'lisi'; // 可以監聽到
使用defineProperty我們就可以監聽到數據變化了。其中這個也是 vue 做響應工做核心的方法了。
下面我們來模擬一下
var mv = {} var data = { price: 100, name: 'zhangsan' } var key, value; for (key in data) { // 命中閉包。新建一個函數，保證 key 的獨立的作用域 (function (key) { Object.defineProperty(mv, key, { get: function () { console.log('get'); return data[key]; }, set: function (newVal) { console.log('set'); data[key] = newVal } }) })(key); }
2、模板解析： vue的模板如何被解析，指令如何處理？
1) vue里面為什么要解析模板？
- 這個模板本質是字符串，
- 但它和html很像但有很大區別，
- 是在這個模板里的html有邏輯，v-for, v-if等等，
- 最終必須解析成html來顯示，
- 模板最終必須轉換成 JS 代碼, 因為：
-
- 有邏輯（v-if v-for）,必須用 JS 才能實現( 圖靈完備)
- 轉換為 html 渲染頁面，必須用 JS 才能實現
- 因此，模板最重要轉換成一個 JS 函數
因為只有JS才能實現將代碼轉化成html格式渲染到瀏覽器上
for example:
<div id="app"> <div> <input v-model="title"> <button v-on:click="add">submit</button> </div> <ul> <li v-for="item in list">{{item}}</li> </ul> </div>以上就是一個模板啦
2) render函數
with 用法（vue render有用到，所以說下用法 ，具體開發中建議不使用）
簡要說明
with 語句可以方便地用來引用某個特定對象中已有的屬性，但是不能用來給對象添加屬性。要給對象創建新的屬性，必須明確地引用該對象。
render 函數
基礎事例
VUE一般使用template來創建HTML，然后在有的時候，我們需要使用javascript來創建html，這時候我們需要使用render函數。
比如如下我想要實現如下html：
我們來嘗試使用 render函數重寫上面的demo，如下：
- 模板中所有信息都包含在了 render 函數中
- this 即 vm
- price 即 this.price 即 vm.price， 即 data 中的 price
- _c 即 this._c 即 vm._c
通過控制台打印，我們就知道了 _c就是一個創建dom 元素的方法， _v 是一個創節點的方法， _s 是 toString 方法。
3、渲染： vue的模板如何被渲染成html? 以及渲染過程？
四、Vue的實現流程
1、首先模板解析器解析成render函數
2、響應式監聽
3、將數據渲染進模板里，
4、data屬性變化，觸發render
jQuery：“ 您能別秀了嗎 ”