vue三要素及底層實現機制
深入解析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：“ 您能別秀了嗎 ”