一，使用jquery和使用vue的區別
二，對MVVM的理解
三，vue中如何實現響應式
四，vue如何解析模版
五，vue整個實現流程
一，使用jquery和使用vue的區別
jquery實現todo-list
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>todo-list-jquery</title> </head> <body> <div> <input type="text" id="txt-title"> <button id="btn-submit">submit</button> </div> <ul id="ul-list"></ul> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script> var $txtTitle = $('#txt-title'); var $btnSubmit = $('#btn-submit'); var $ulList = $('#ul-list'); $btnSubmit.click(function() { var title = $txtTitle.val(); if (!title) { return; } var $li = $('<li>' + title + '</li>'); $ulList.append($li); $txtTitle.val(''); }) </script> </body> </html>
vue實現todo-list
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>todo-list-vue</title> <script src="./vue-2.5.13.js"></script> </head> <body> <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> <script> var vm = new Vue({ el: "#app", data: { title: '', list: [], }, methods: { add: function() { if (this.title) { this.list.push(this.title); this.title = ''; } } } }) </script> </body> </html>
jquery和vue兩者的區別：
數據和視圖的分離-解耦（開放封閉原則）
以數據驅動視圖-只關心數據變化，DOM操作被封裝
二，對MVVM的理解
1，先說下MVC：
M-Model 數據
V-VIew 視圖、界面
C-Controller 控制器、邏輯處理
兩種場景：
2，MVVM
Model-模型、數據
View-視圖、模版（視圖和模型是分離的）
ViewModel-連接Model和View，“橋”
3，關於ViewModel
MVVM不算是一種創新-是微創新
但其中的ViewModel是一種創新
真正結合前端場景應用的創建
4，MVVM框架的三大要素（實現的三要素）
響應式：vue如何間聽到data的每個屬性變化？
模版引擎：vue的模版如何被解析，指令如何處理？
渲染：vue的模版如何被渲染成html？以及渲染過程
三，vue中如何實現響應式
1，什么是響應式
修改data屬性之后，vue立刻監聽到
data屬性被代理到vm(this)上，data的屬性，同時也變成了this的屬性
例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-demo</title> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> </head> <body> <div id="app"> <p>{{name}}</p> <p>{{age}}</p> </div> <script> var vm = new Vue({ el:'#app', data:{ name:'zs', age:20 } }) console.log(vm.age) </script> </body> </html>
在控制台修改vm.age 或者vm.name，立刻會被監聽渲染出來
2，Object.defineProperty：直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性， 並返回這個對象。
語法：
Object.defineProperty(obj, prop, descriptor)
例子：
var obj = {}; var _name = 'zs'; Object.defineProperty(obj,'name',{ get:function(){ console.log('get',_name);//監聽 return _name; }, set:function(newVal){ console.log('set',newVal);//監聽 _name = newVal; } });
3，模擬實現（監聽+代理）
var vm = {}; var data = { name: 'zs', age: 20 }; var key, value; for (key in data) { // 命中閉包，新建一個函數，保證key的獨立的作用域 (function(key) { Object.defineProperty(vm, key, { //data屬性代理到vm上 get: function() { console.log('get', data[key]); //監聽 return data[key]; }, set: function(newVal) { console.log('set', newVal); //監聽 data[key] = newVal; } }) })(key) }
看下控制台中，此時打印的vm
四，vue如何解析模版
1，模版是什么
本質：字符串
有邏輯，如v-if,v-for等
與html格式很像，但有很大區別（html靜態的，沒有邏輯）
要轉換為html來顯示
模版最終必須要轉換成js代碼，原因如下：
有邏輯（v-if,v-for)，前端必須用js才能實現（圖靈完備）
轉換為html渲染頁面，前端必須用js才能實現
因此，模版最終要轉換成一個js函數（render函數，即渲染函數）
2，render函數
render函數-with的用法（with可以了解下實現，但是實際開發中最好不要用，問題比較多）
先看下with的簡單用法：
var obj = { name: 'xx', age:20, getAddress:function(){ console.log('bj'); } } // 不用with function fn(){ console.log(obj.name); console.log(obj.age); obj.getAddress(); } fn() // 使用with function fn1(){ with(obj) { console.log(name); console.log(age); getAddress(); } } fn1()
3，render函數
模版：
<div id="app"> <p>{{price}}</p> </div> <script> var vm = new Vue({ el:'#app', data:{ price:100 } }) </script>
render函數如下：
// 以下是手寫的 render 函數 使用 with ，代碼簡潔一些 function render() { with(this) { return _c( 'div', { attrs: { "id", "app" } }, [ _c('p', [_v(_s(price))]) ] ) } } // 不用 with 的改寫的 render 函數 function render1() { return vm._c( 'div', { attrs: { "id", "app" } }, [ vm._c('p', [_vm.v(vm._s(vm.price))]) ] ) } // 模版中所有信息都包含在了 render 函數中 // this === vm // price 即 this.price 即vm.price, 即 data 中的 price // _c 即 this._c , 即 vm._c
看下控制台：
問題：
從哪里可以看到render函數？
復雜一點的例子，render函數是什么樣子的？
v-if, v-for, v-on都是怎么處理的？
回顧之前的demo
<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>
對應的render函數：（通過在vue-2.5.13.js源碼中 console.log（code.render）得出）
with(this){ return _c( 'div', {attrs:{"id":"app"}}, [_c('div', [_c( 'input', { directives:[ { name:"model", rawName:"v-model", value:(title), expression:"title" } ], domProps:{"value":(title)}, on:{ "input":function($event){ if($event.target.composing)return; title=$event.target.value } } } ), _v(" "), _c( 'button', { on:{ "click":add } }, [_v("submit")] ) ]), _v(" "), _c( 'ul', _l( (list),function(item){ return _c( 'li', [ _v( _s(item) ) ] ) } ） ) ] ) }
根據todo-list demo的render函數：
v-model是怎么實現的？：雙向數據綁定，既有get，又有set
v-on:click是怎么實現的？：渲染時綁定click事件
v-for是怎么實現的？：對數組進行遍歷，li標簽，最后歸結為數組，作為ul的子元素
模版生成html
vm.c其實就相當於snabbdom中的h函數
render函數執行之后，返回的是vnode
vm._update(vnode) { const prevVnode = vm._vnode; vm._vnode = vnode; if (!prevVnode) { // 初次渲染 vm.$el = vm.__patch__(vm.$el, vnode); } else { // re-render vm.$el = vm.__patch__(prevVnode, vnode); } } function updateComponent() { // vm._render即上面的render函數，返回vnode vm._update(vm._render()) } // updateComponent實現了vdom的patch // 頁面首次渲染執行updateComponent（執行第一個patch） // data中每次修改屬性，執行updateComponent，修改data，set中可以執行updateComponent
vue如何解析模版：
模版：字符串（本質），有邏輯，嵌入js變量...
模版必須轉換為js代碼（有邏輯，渲染html，js變量）前端中，只有js才能處理邏輯和渲染html等
render函數: with語法，就是snabbdom里h函數的樣子
render函數執行是返回vnode
updateComponent 首次渲染，非首次渲染（data屬性修改）
五，vue的整個實現流程
第一步：解析模版成render函數
with用法（了解即可，自己開發的時候，盡量避免使用）
模版中的所有信息都被render函數包含
模版中用到的data中的屬性，都變成了js變量
模版中的v-model,v-for,v-on都變成了js邏輯
render函數返回vnode
第二步：響應式開始監聽
Object.defineProperty中設置監聽
將data的屬性代理到vm上
第三步：首次渲染，顯示頁面，且綁定依賴
初次渲染，執行updateComponent，執行vm._render()
執行render函數，會訪問到vm.list和vm.title
會被響應式的get方法監聽到（后面詳細講）
執行updateComponent，會走到vdom的patch方法
patch將vnode渲染成DOM，初次渲染完成
疑問：
為何要監聽get，直接監聽set不行嗎？
data中有很多屬性，有些被用到，有些可能不被用到
被用到的會走到get，不被用到的不會走到get
未走到get中的屬性，set的時候我們也無須關心
避免不必要的重復渲染
第四步：data屬性變化，觸發rerender
修改屬性，被響應式的set監聽到
set中執行updateComponent (這里是異步的）
updateComponent重新執行vm._render()
生成的vnode和prevVnode，通過patch進行對比
渲染到html中
附：Vue的生命周期
vue調試工具vue-devtools安裝及使用