前端MVVM是一種軟件架構(gòu)設(shè)計(jì)模式，其本質(zhì)上就是MVC的改進(jìn)版，就是將其中的View的狀態(tài)和行為抽象化，讓開(kāi)發(fā)者將視圖UI和業(yè)務(wù)邏輯分開(kāi)，該模式的優(yōu)點(diǎn)有低耦合、可重用性、獨(dú)立開(kāi)發(fā)和可測(cè)試。

MVVM是Model-View-ViewModel的簡(jiǎn)寫(xiě)。它本質(zhì)上就是MVC 的改進(jìn)版。MVVM 就是將其中的View 的狀態(tài)和行為抽象化，讓我們將視圖 UI 和業(yè)務(wù)邏輯分開(kāi)。當(dāng)然這些事 ViewModel 已經(jīng)幫我們做了，它可以取出 Model 的數(shù)據(jù)同時(shí)幫忙處理 View 中由于需要展示內(nèi)容而涉及的業(yè)務(wù)邏輯。微軟的WPF帶來(lái)了新的技術(shù)體驗(yàn)，如Silverlight、音頻、視頻、3D、動(dòng)畫(huà)……，這導(dǎo)致了軟件UI層更加細(xì)節(jié)化、可定制化。同時(shí)，在技術(shù)層面，WPF也帶來(lái)了 諸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM（Model-View-ViewModel）框架的由來(lái)便是MVP（Model-View-Presenter）模式與WPF結(jié)合的應(yīng)用方式時(shí)發(fā)展演變過(guò)來(lái)的一種新型架構(gòu)框架。它立足于原有MVP框架并且把WPF的新特性糅合進(jìn)去，以應(yīng)對(duì)客戶日益復(fù)雜的需求變化。

MVVM邏輯圖

MVVM模式的組成部分

模型

模型是指代表真實(shí)狀態(tài)內(nèi)容的領(lǐng)域模型（面向?qū)ο螅?，或指代表?nèi)容的數(shù)據(jù)訪問(wèn)層（以數(shù)據(jù)為中心）。

視圖

就像在MVC和MVP模式中一樣，視圖是用戶在屏幕上看到的結(jié)構(gòu)、布局和外觀（UI）。

視圖模型

視圖模型是暴露公共屬性和命令的視圖的抽象。MVVM沒(méi)有MVC模式的控制器，也沒(méi)有MVP模式的presenter，有的是一個(gè)綁定器。在視圖模型中，綁定器在視圖和數(shù)據(jù)綁定器之間進(jìn)行通信。

綁定器

聲明性數(shù)據(jù)和命令綁定隱含在MVVM模式中。在Microsoft解決方案堆中，綁定器是一種名為XAML的標(biāo)記語(yǔ)言。綁定器使開(kāi)發(fā)人員免于被迫編寫(xiě)樣板式邏輯來(lái)同步視圖模型和視圖。在微軟的堆之外實(shí)現(xiàn)時(shí)，聲明性數(shù)據(jù)綁定技術(shù)的出現(xiàn)是實(shí)現(xiàn)該模式的一個(gè)關(guān)鍵因素。

推薦教程：《JS教程》