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

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!"

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

接下來我們修改了vm.message的值，此時example.message的值也發生了變化，都變成了"Hello, World!"。這是因為Vue將example的屬性轉化為了響應式屬性，并且將vm.$data.message與example.message關聯了起來。

但是你可能會發現，我們并沒有在vm實例上直接定義message屬性。這是因為當我們傳入一個對象作為數據選項時，Vue會將這個對象的所有屬性轉換為響應式屬性。

除了響應式屬性，Vue中還有一些非響應式屬性，例如實例方法和生命周期鉤子函數。一個非響應式屬性的值不會在視圖中被更新，因為它們并沒有被轉化為響應式屬性。在Vue中，我們通常將非響應式屬性加上一個前綴$，以示區別。

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!"

在上面的代碼中，我們定義了一個叫做greet的實例方法。我們調用了vm.greet()，結果輸出了"Hello!"。但是這個調用并不會更新視圖，因為greet是一個非響應式屬性。

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

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對象凍結，然后將其傳入Vue實例的數據選項中。當我們嘗試修改vm.message的值時，Vue會靜默失敗，因為example已經被凍結了。