理解vue與MVVM三要素
阿新 • • 發佈：2018-12-19
MVVM到底是什麼，跟Jquery有什麼區別？
-
MVVM理解，跟MVC區別
- Model View Controller,一般是使用者操作view檢視按鈕，觸發controller內方法，cotroller修改model資料，model通知view，算是後端開發的主流思想
- vue中template為View, data物件為Model,new Vue({el,data,methods})為ViewModel，連線檢視view與data，view通過DOMlistenser事件'on'繫結來操作model,model通過資料繫結dataBinding操作view
-
資料，檢視層是否分離
- vue中，proxy代理_data資料，並且不允許直接修改。template為檢視
- 不分離背離了開放封閉的原則，不利於維護，功能擴充套件
-
以資料驅動檢視
- 只修改資料，就會觸發封裝好的dom操作。不需要手動進行dom操作
-
MVVM 實現三要素
-
如何監聽變化，實現響應式
- Object.defineProperty設定get,set監聽data變化
- vm.data，利用Object.defineProperty，proxy代理data物件,便於render函式中的this取值
-
檢視模板解析，模板引擎
- 本質是字串，有v-if,v-for等邏輯，需要以js執行
-
將js中data物件屬性捆綁到render函式，最後返回vnode，render函式中結構與snabbdom中h函式相似
``` // vue function render () { with (this) { //將_c,_v,price的this省略，相當於this._c,this._vthis.price _c('div', {attrs: {'id': 'app'}}, [_c('span', [_v(_s(price))])]) //_c建立vnode，_v字串節點，_s字串轉話 } } // snabbdom h('div#app', [ h('span', vm.price) ]) ```
-
dom如何生成的，如何在監聽變化後渲染,使用patch方法與snabbdom相同
- 首次渲染
-
更新渲染
``` vm._update(vnode) { const prevVnode = vm.vnode vm._vnode = vnode if (!prevVnode) { vm.$el = vm.__patch__(vm.$el,vnode) //初次渲染 } else { vm.$el = vm.__patch__(prevVnode,vnode) } } function updateComponent() { vm._update(vm._render()) //此處render即是模板轉化的render函式，執行後可生成vnode } ```
-