在vue中，mvvm模式分別是模型層（m）、視圖層（v）和ViewModel（vm）；mvvm支持雙向綁定，當(dāng)m層數(shù)據(jù)進(jìn)行修改時(shí)，vm層會(huì)檢測到變化，并且通知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ì)分下來就是html+css層；

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

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

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

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

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

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

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

【