MVVM（Model-View-ViewModel）是一種設(shè)計模式，是在MVC（Model-View-Controller）的基礎(chǔ)上演化而來的，旨在通過數(shù)據(jù)綁定來實現(xiàn)View和Model之間的雙向綁定，同時ViewModel作為View和Model之間的數(shù)據(jù)傳輸層，負責將View的操作轉(zhuǎn)化成對Model的操作，將Model的數(shù)據(jù)轉(zhuǎn)化成View可以顯示的數(shù)據(jù)。

var data = {
message: "Hello, Vue!",
username: "Guest"
};
var vm = new Vue({
el: "#app",
data: data,
computed: {
greeting: function() {
return `Welcome, ${this.username}! ${this.message} `;
}
},
methods: {
changeMessage: function() {
this.message = "Nice to meet you!";
}
}
});

Vue采用了MVVM模式，并加以改進，將ViewModel進一步細分為Observer、Compiler和Watcher。Observer將Model數(shù)據(jù)轉(zhuǎn)化成帶有數(shù)據(jù)劫持功能的Observer對象，Compiler將模板和Observer進行合成，生成可以渲染的View，Watcher監(jiān)聽數(shù)據(jù)變化，并將變化反映到View的相關(guān)節(jié)點上。

var data = {
message: "Hello, Vue!"
};
function Observer(data) {
this.data = data;
this.walk(data);
}
Observer.prototype = {
walk: function(obj) {
var val;
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
val = obj[key];
if (typeof val === "object") {
new Observer(val);
}
this.convert(key, val);
}
}
},
convert: function(key, val) {
Object.defineProperty(this.data, key, {
configurable: true,
enumerable: true,
get: function() {
console.log("你訪問了 " + key);
return val;
},
set: function(newVal) {
console.log("你設(shè)置了 " + key + "，新的值為 " + newVal);
if (newVal === val) return;
val = newVal;
}
});
}
};

Vue的數(shù)據(jù)綁定機制采用了雙向數(shù)據(jù)綁定和單向數(shù)據(jù)綁定兩種方式。雙向數(shù)據(jù)綁定指的是數(shù)據(jù)的變化可以自動反映到View上，View的變化也可以自動反映到數(shù)據(jù)上；單向數(shù)據(jù)綁定指的是數(shù)據(jù)的變化只能自動反映到View上或者View的變化只能自動反映到數(shù)據(jù)上。

{{message}}
var vm = new Vue({
el: "#app",
data: {
message: "Hello, Vue!"
}
});

Vue的數(shù)據(jù)綁定機制將MVVM模式完美地實現(xiàn)，它使得View和Model之間的數(shù)據(jù)同步變得非常方便，同時也降低了開發(fā)者的心智負擔，讓開發(fā)者更專注于業(yè)務(wù)邏輯的實現(xiàn)。