這篇文章主要介紹了vue中mvvm模式怎么理解的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇vue中mvvm模式怎么理解文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

創(chuàng)新互聯(lián)公司從2013年創(chuàng)立，先為重慶等服務(wù)建站，重慶等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為重慶企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

在vue中，mvvm模式分別是模型層（m）、視圖層（v）和ViewModel（vm）；mvvm支持雙向綁定，當(dāng)m層數(shù)據(jù)進(jìn)行修改時(shí)，vm層會(huì)檢測(cè)到變化，并且通知v層進(jìn)行相應(yīng)的修改，反之修改v層會(huì)通知m層進(jìn)行修改，實(shí)現(xiàn)了視圖與模型層的相互解耦。

本文操作環(huán)境：windows10系統(tǒng)、Vue2.9.6版，DELL G3電腦。

vue中mvvm模式如何理解

MVVM分為三個(gè)部分：分別是M（Model，模型層 ），V（View，視圖層），VM（ViewModel，V與M連接的橋梁，也可以看作為控制器）

1、 M：模型層，主要負(fù)責(zé)業(yè)務(wù)數(shù)據(jù)相關(guān)；

2、 V：視圖層，顧名思義，負(fù)視圖相關(guān)，細(xì)分下來(lái)就是html+css層；

3、 VM：V與M溝通的橋梁，負(fù)責(zé)監(jiān)聽(tīng)M或者V的修改，是實(shí)現(xiàn)MVVM雙向綁定的要點(diǎn)；

MVVM支持雙向綁定，意思就是當(dāng)M層數(shù)據(jù)進(jìn)行修改時(shí)，VM層會(huì)監(jiān)測(cè)到變化，并且通知V層進(jìn)行相應(yīng)的修改，反之修改V層則會(huì)通知M層數(shù)據(jù)進(jìn)行修改，以此也實(shí)現(xiàn)了視圖與模型層的相互解耦；

要實(shí)現(xiàn)一個(gè)mvvm的庫(kù)，我們首先要理解清楚其實(shí)現(xiàn)的整體思路。先看看下圖的流程：

1.實(shí)現(xiàn)compile,進(jìn)行模板的編譯，包括編譯元素（指令）、編譯文本等，達(dá)到初始化視圖的目的，并且還需要綁定好更新函數(shù)；

2.實(shí)現(xiàn)Observe,監(jiān)聽(tīng)所有的數(shù)據(jù)，并對(duì)變化數(shù)據(jù)發(fā)布通知；

3.實(shí)現(xiàn)watcher,作為一個(gè)中樞，接收到observe發(fā)來(lái)的通知，并執(zhí)行compile中相應(yīng)的更新方法。

4.結(jié)合上述方法，向外暴露mvvm方法

關(guān)于“vue中mvvm模式怎么理解”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“vue中mvvm模式怎么理解”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。