如何理解mvvm原理

說起這個mvvm模型，就不得不說mvc框架。

將整個前端頁面分成view，controller，modal，檢視上發生變化，通過controller（控制項）將響應傳入到model（資料來源），由資料來源改變view上面的資料。

整個過程看起來是行雲流水，業務邏輯放在model當中，頁面渲染邏輯放在view當中，但在實際運用上卻存在乙個問題：那就是mvc框架允許view和model直接進行通訊！！

換句話說，view和model之間隨著業務量的不斷龐大，會出現蜘蛛網一樣難以處理的依賴關係，完全背離了開發所應該遵循的「開放封閉原則」。

面對這個問題，mvvm框架就出現了，它與mvc框架的主要區別有兩點：

1、實現資料與檢視的分離

2、通過資料來驅動檢視，開發者只需要關心資料變化，dom操作被封裝了。

可以看到mvvm分別指view，model，view-model，view通過view-model的dom listeners將事件繫結到model上，而model則通過data bindings來管理view中的資料，view-model從中起到乙個連線橋的作用。

mvvm的實現主要是三個核心點：

響應式：vue如何監聽data的屬性變化

模板解析：vue的模板是如何被解析的

渲染：vue模板是如何被渲染成html的

對於mvvm來說，data一般是放在乙個物件當中，就比如這樣：

var obj =

當我們訪問或修改obj的屬性的時候，比如：

console.log（obj.name） //訪問 obj.age = 22 //修改

但是這樣的操作vue本身是沒有辦法感知到的，那麼應該如何讓vue知道我們進行了訪問或是修改的操作呢？

那就要使用object.defineproperty

var vm = {}
var data = 
var key, value
for (key in data) ,
set: function (newval) 
})})(key)
}

通過object.defineproperty將data裡的每乙個屬性的訪問與修改都變成了乙個函式，在函式get和set中我們即可監聽到data的屬性發生了改變。

首先模板是什麼？

模板本質上是一串字串，它看起來和html的格式很相像，實際上有很大的區別，因為模板本身還帶有邏輯運算，比如v-if，v-for等等，但它最後還是要轉換為html來顯示。

submitbutton>

div>

}li>

ul>

div>

模板在vue中必須轉換為js**，原因在於：在前端環境下，只有js才是乙個圖靈完備語言，才能實現邏輯運算，以及渲染為html頁面。

這裡就引出了vue中乙個特別重要的函式——render

render函式中的核心就是with函式。

with函式將某個物件新增到作用域鏈的頂部，如果在 statement中有某個未使用命名空間的變數，跟作用域鏈中的某個屬性同名，則這個變數將指向這個屬性值。

舉個例子：

var obj = 
}function fn1() 
}fn1()

with將obj這個物件放在了自己函式的作用域鏈的頂部，當執行下列函式時，就會自動到obj這個物件去尋找同名的屬性。

而在render函式中，with的用法是這樣：

submitbutton>

div>

}li>

ul>

div>

// 對應的js檔案
var data = 
// 初始化 vue 例項
var vm = new vue(}})
with(this),
[_c(
'div',
[_c(
'input',
],domprops:,
on:}}),
_v(" "),
_c('button',
},[_v("submit")])]
),_v(" "),
_c('div',
[_c(
'ul',
_l((list),function(item)))]
)])}

在一開始，因為new操作符，所以this指向了vm，通過with我們將vm這個物件放在作用域鏈的頂部，因為在函式內部我們會多次呼叫vm內部的屬性，所以使用with可以縮短變數長度，提供系統執行效率。

其中的_c函式表示的是建立乙個新的html元素，其基本用法為：

_c(element,,[children...])

其中的element表示所要建立的html元素型別，attrs表示所要建立的元素的屬性，children表示該html元素的子元素。

_v函式表示建立乙個文字節點，_l函式表示建立乙個陣列。

最終render函式返回的是乙個虛擬dom。

模板渲染為html分為兩種情況，第一種是初次渲染的時候，第二種是渲染之後資料發生改變的時候，它們都需要呼叫updatecomponent,其形式如下：

vm._update(vnode) else 
}function updatecomponent()

首先讀取當前的虛擬dom——vm._vnode,判斷其是否為空，若為空，則為初次渲染，將虛擬dom全部渲染到所對應的容器當中（vm.$el），若不為空，則是資料發生了修改，通過響應式我們可以監聽到這一情況，使用diff演算法完成新舊對比並修改。

如何理解mvvm原理

Vue 如何理解MVVM？

MVVM模式理解

手寫 MVVM原理5

如何理解mvvm原理

Vue 如何理解MVVM？

MVVM模式理解

手寫 MVVM原理5

相關推薦