vue中的mvvm模式講解

更新時間：2019年01月31日 10:03:46 作者：mumu1998

今天小編就為大家分享一篇關(guān)于vue中的mvvm模式講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧

學(xué)習(xí)了MVVM模式

起先還覺得有點(diǎn)難，后面與雙向數(shù)據(jù)綁定鏈接起來還是很容易理解的。

那么什么是MVVM呢？

不明思議咋們肯定和我想的一樣每個單詞的首寫字母唄！

對沒錯就是它 Model-View-ViewModel。可以實(shí)現(xiàn)我們的雙向數(shù)據(jù)綁定

下面我來用我的理解解析下它們之間的關(guān)系：

哈哈有點(diǎn)小尷尬哈

先來說下View與Model之間有聯(lián)系嗎？

在MVVM架構(gòu)下，View 和 Model 之間其實(shí)并沒有直接的聯(lián)系，而是通過ViewModel進(jìn)行交互，Model 和 ViewModel 之間的交互是雙向的，因此View 數(shù)據(jù)的變化會同步到Model中，而Model 數(shù)據(jù)的變化也會立即反應(yīng)到View 上。

好啦，說到這可能有些小伙伴會問view 什么，Model是什么？

Model 層代表數(shù)據(jù)模型，也可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯；

View 代表UI 組件，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI 展現(xiàn)出來，ViewModel 是一個同步View 和 Model的對象。

Vue是以數(shù)據(jù)為驅(qū)動的，Vue自身將DOM和數(shù)據(jù)進(jìn)行綁定，一旦創(chuàng)建綁定，DOM和數(shù)據(jù)將保持同步，每當(dāng)數(shù)據(jù)發(fā)生變化，DOM會跟著變化。

現(xiàn)在明白了吧！

好啦我們繼續(xù)談?wù)勊鼈內(nèi)咧g的關(guān)系呀它們之間是不是有個三角戀吶

哈哈不錯

ViewModel 通過雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來，ViewModel里面包含DOM Listeners和Data Bindings，DOM Listeners和Data Bindings是實(shí)現(xiàn)雙向綁定的關(guān)鍵。DOM Listeners監(jiān)聽頁面所有View層DOM元素的變化，當(dāng)發(fā)生變化，Model層的數(shù)據(jù)隨之變化；Data Bindings監(jiān)聽Model層的數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化，View層的DOM元素隨之變化。

mvvm有什么好處呢當(dāng)然這個肯定有好處的不然學(xué)它干哈

1. 低耦合。View可以獨(dú)立于Model變化和修改，一個ViewModel可以綁定到不同的View上，當(dāng)View變化的時候Model可以不變，當(dāng)Model變化的時候View也可以不變。

2. 可重用性?？梢园岩恍┮晥D的邏輯放在ViewModel里面，讓很多View重用這段視圖邏輯。

3. 獨(dú)立開發(fā)。開發(fā)人員可以專注與業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)(ViewModel)。設(shè)計人員可以專注于界面(View)的設(shè)計。

4. 可測試性?？梢葬槍iewModel來對界面(View)進(jìn)行測試

咋們一起走向vue之路吧

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接

您可能感興趣的文章: