MVVM 由 Model,View,ViewModel 三部分構(gòu)成，Model 層代表數(shù)據(jù)模型座慰，也可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯念搬；View 代表UI 組件，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI 展現(xiàn)出來比规，ViewModel 是一個同步View 和 Model的對象。
在MVVM架構(gòu)下拦英，View 和 Model 之間并沒有直接的聯(lián)系蜒什，而是通過ViewModel進(jìn)行交互，Model 和 ViewModel 之間的交互是雙向的疤估， 因此View 數(shù)據(jù)的變化會同步到Model中灾常，而Model 數(shù)據(jù)的變化也會立即反應(yīng)到View 上。
ViewModel 通過雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來铃拇，而View 和 Model 之間的同步工作完全是自動的钞瀑，無需人為干涉，因此開發(fā)者只需關(guān)注業(yè)務(wù)邏輯慷荔，不需要手動操作DOM, 不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問題雕什，復(fù)雜的數(shù)據(jù)狀態(tài)維護(hù)完全由 MVVM 來統(tǒng)一管理。
<!-- 這是我們的 View -->
<div id="example-1">
Hello {{ name }}!
</div>
// 這是我們的 Model
var exampleData = {
name: 'Vue.js'
}
// 創(chuàng)建一個 Vue 實(shí)例或 "ViewModel"
// 它連接 View 與 Model
var exampleVM = new Vue({
el: '#example-1', // 在一個id為'example-1'的實(shí)體上掛載
data: exampleData // 數(shù)據(jù)流
})
