vue中mvvm模式如何理解

在vue中，mvvm模式分別是模型層（m）、視圖層（v）和ViewModel（vm）；mvvm支援雙向綁定，當m層資料進行修改時，vm層會偵測到變化，並且通知v層進行對應的修改，反之修改v層會通知m層進行修改，實現了視圖與模型層的相互解耦。

本文操作環境：windows10系統、Vue2.9.6版，DELL G3電腦。

vue中mvvm模式如何理解

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

1、 M：模型層，主要負責業務資料相關；

2、 V：視圖層，顧名思義，負視圖相關，細分下來就是html css層；

3、 VM：V與M溝通的橋樑，負責監聽M或V的修改，是實現MVVM雙向綁定的重點；

MVVM支援雙向綁定，意思是當M層資料進行修改時，VM層會監測到變化，並且通知V層進行相應的修改，反之修改V層則會通知M層資料進行修改，以此也實現了視圖與模型層的相互解耦；

要實作一個mvvm的函式庫，我們首先要先理解清楚其實作的整體思路。先看看下圖的流程：

1.實作compile,進行範本的編譯，包括編譯元素（指令）、編譯文字等，達到初始化視圖的目的，並且還需要綁定好更新函數；

2.實現Observe,監聽所有的數據，並對變化數據發布通知；

3.實現watcher,作為一個中樞，接收到observe發出的通知，並執行compile中對應的更新方法。

4.結合上述方法，向外揭露mvvm方法 

【相關推薦：《vue.js教學》】

#

以上是vue中mvvm模式如何理解的詳細內容。更多資訊請關注PHP中文網其他相關文章！