Vue.js 采用了數(shù)據(jù)響應(yīng)式的設(shè)計，也就是說，當(dāng)我們在組件中定義 data 數(shù)據(jù)時，Vue.js 會自動將其轉(zhuǎn)換為響應(yīng)式數(shù)據(jù)。一旦數(shù)據(jù)改變，Vue.js 會自動檢測到變化并且更新組件的視圖。

因此，我們在寫 Vue.js 組件時，在定義 data 數(shù)據(jù)時要注意，一定要定義為一個函數(shù)并返回一個對象，而不是直接定義為一個對象。這是因為如果 data 直接定義為一個對象，所有的實例將共享同一個 data 對象，如果修改了其中一個實例的 data ，會導(dǎo)致所有實例的 data 發(fā)生改變。

data: function() {
return {
message: 'hello world'
}
}

在 data 中定義的數(shù)據(jù)可以在組件中通過 this.message 訪問到，并且可以在模板中直接使用。如果需要在 data 中使用已經(jīng)定義好的變量，也可以像下面這樣使用。

var message = 'hello world';
data: function() {
return {
message: message
}
}

當(dāng)然，如果 data 中定義的變量較多，也可以使用 ES6 中的對象解構(gòu)語法。

var message = 'hello world';
var name = 'Vue.js';
data: function() {
return {
message,
name
}
}

上面的代碼等同于下面的代碼。

var message = 'hello world';
var name = 'Vue.js';
data: function() {
return {
message: message,
name: name
}
}

總之，在定義 Vue.js 組件的時候，data 作為組件的核心數(shù)據(jù)，一定要注意它的正確使用方式。