Vue的核心是響應(yīng)式系統(tǒng)。這意味著Vue中絕大部分屬性都是變量。這些屬性被稱(chēng)為“響應(yīng)式屬性”或“響應(yīng)式變量”，它們的值可以直接被修改并且在視圖中立即更新。

var example = { message: 'Hello, Vue!' };
var vm = new Vue({
data: example
});
console.log(example.message); // "Hello, Vue!"
console.log(vm.$data.message); // "Hello, Vue!"
vm.message = 'Hello, World!';
console.log(example.message); // "Hello, World!"
console.log(vm.$data.message); // "Hello, World!"

在上面的代碼中，我們定義了一個(gè)叫做example的變量，它有一個(gè)名叫message的屬性。然后我們創(chuàng)建了一個(gè)Vue實(shí)例，并將example作為該實(shí)例的數(shù)據(jù)選項(xiàng)傳入。接著我們打印出了example.message和vm.$data.message的值，它們都是"Hello, Vue!"。

接下來(lái)我們修改了vm.message的值，此時(shí)example.message的值也發(fā)生了變化，都變成了"Hello, World!"。這是因?yàn)閂ue將example的屬性轉(zhuǎn)化為了響應(yīng)式屬性，并且將vm.$data.message與example.message關(guān)聯(lián)了起來(lái)。

但是你可能會(huì)發(fā)現(xiàn)，我們并沒(méi)有在vm實(shí)例上直接定義message屬性。這是因?yàn)楫?dāng)我們傳入一個(gè)對(duì)象作為數(shù)據(jù)選項(xiàng)時(shí)，Vue會(huì)將這個(gè)對(duì)象的所有屬性轉(zhuǎn)換為響應(yīng)式屬性。

除了響應(yīng)式屬性，Vue中還有一些非響應(yīng)式屬性，例如實(shí)例方法和生命周期鉤子函數(shù)。一個(gè)非響應(yīng)式屬性的值不會(huì)在視圖中被更新，因?yàn)樗鼈儾](méi)有被轉(zhuǎn)化為響應(yīng)式屬性。在Vue中，我們通常將非響應(yīng)式屬性加上一個(gè)前綴$，以示區(qū)別。

var example = { message: 'Hello, Vue!' };
var vm = new Vue({
data: example,
methods: {
greet: function () {
console.log('Hello!');
}
}
});
vm.greet(); // "Hello!"
console.log(vm.$data.message); // "Hello, Vue!"

在上面的代碼中，我們定義了一個(gè)叫做greet的實(shí)例方法。我們調(diào)用了vm.greet()，結(jié)果輸出了"Hello!"。但是這個(gè)調(diào)用并不會(huì)更新視圖，因?yàn)間reet是一個(gè)非響應(yīng)式屬性。

最后，雖然Vue中的大部分屬性都是變量，但是你依然可以手動(dòng)使用Object.freeze()方法將一個(gè)對(duì)象凍結(jié)。這個(gè)方法會(huì)阻止這個(gè)對(duì)象被修改。如果你使用了凍結(jié)對(duì)象作為數(shù)據(jù)選項(xiàng)，那么這個(gè)對(duì)象及其所有屬性都將被視為非響應(yīng)式屬性。

var example = Object.freeze({ message: 'Hello, Vue!' });
var vm = new Vue({
data: example
});
vm.message = 'Hello, World!'; // 靜默失敗
console.log(example.message); // "Hello, Vue!"

在上面的代碼中，我們使用Object.freeze方法將example對(duì)象凍結(jié)，然后將其傳入Vue實(shí)例的數(shù)據(jù)選項(xiàng)中。當(dāng)我們嘗試修改vm.message的值時(shí)，Vue會(huì)靜默失敗，因?yàn)閑xample已經(jīng)被凍結(jié)了。