Vue的data函數(shù)是用來定義組件中的數(shù)據(jù)響應(yīng)式模型的，使用data函數(shù)的方式非常靈活，可以通過對(duì)象形式或者函數(shù)形式來書寫。下面分別介紹兩種寫法。

// data函數(shù)，對(duì)象形式
data: {
message: "Hello World!"
}
// data函數(shù)，函數(shù)形式
data: function() {
return {
message: "Hello World!"
}
}

在對(duì)象形式下，我們可以直接將需要響應(yīng)式的數(shù)據(jù)以鍵值對(duì)形式書寫在data函數(shù)中。在使用時(shí)，只需要通過this關(guān)鍵字來訪問該數(shù)據(jù)即可。

// 獲取數(shù)據(jù)
var message = this.message;
// 設(shè)置數(shù)據(jù)
this.message = "New Message!";

而在函數(shù)形式下，我們需要在函數(shù)體中顯式地返回一個(gè)對(duì)象，該對(duì)象就是我們所需要響應(yīng)式的數(shù)據(jù)。

data: function() {
var data = {
message: "Hello World!"
};
// 修改數(shù)據(jù)
data.message = "New Message!";
return data;
}

在以上代碼中，我們可以看到在函數(shù)體中可以對(duì)數(shù)據(jù)進(jìn)行處理，返回的數(shù)據(jù)就會(huì)響應(yīng)式地更新到組件中。

需要注意的是，在Vue中，通過data函數(shù)定義的數(shù)據(jù)只會(huì)在組件實(shí)例化時(shí)進(jìn)行響應(yīng)式處理，因此如果我們需要在組件中使用一個(gè)動(dòng)態(tài)數(shù)據(jù)，則需要將他定義成計(jì)算屬性，而不能使用data函數(shù)。

computed: {
dynamicData: function() {
return "Dynamic Data: " + this.message;
}
}

上述代碼中，我們通過computed函數(shù)來定義了一個(gè)動(dòng)態(tài)數(shù)據(jù)dynamicData，并且該數(shù)據(jù)可以隨時(shí)根據(jù)message的值進(jìn)行更新。

除了使用對(duì)象形式和函數(shù)形式來書寫data函數(shù)，我們還可以在data函數(shù)中使用另一個(gè)重要的函數(shù)：new Vue()。

data: {
message: new Vue({
data: {
text: "Hello World!"
}
}).text
}

在以上代碼中，我們?cè)赿ata函數(shù)中使用了new Vue()函數(shù)來定義了一個(gè)新的Vue實(shí)例，并將其data屬性中的text屬性作為我們需要響應(yīng)式的數(shù)據(jù)。

除了使用對(duì)象形式、函數(shù)形式以及new Vue()函數(shù)來書寫data函數(shù)，我們還可以在data函數(shù)中使用ES6的展開運(yùn)算符來繼承父組件的數(shù)據(jù)。

// 父組件數(shù)據(jù)
data: {
message: "Hello World!"
}
// 子組件數(shù)據(jù)
data: function() {
return {
...this.$parent.$data
}
}

在以上代碼中，我們可以看到通過ES6的展開運(yùn)算符，子組件實(shí)現(xiàn)了對(duì)父組件數(shù)據(jù)的繼承，并且子組件中所繼承的數(shù)據(jù)依然是響應(yīng)式的。

總而言之，在Vue中，data函數(shù)是非常重要的一個(gè)函數(shù)，通過靈活的書寫方式，我們可以輕松地定義組件中的響應(yīng)式數(shù)據(jù)，并在組件中方便地進(jìn)行訪問和修改。