并不是這樣的，data在子組件里是一個(gè)函數(shù)，是為了告訴你，這個(gè)數(shù)據(jù)是這個(gè)組件獨(dú)享的，不要和其他組件公用，避免沖突。

官網(wǎng)上有非常好的解釋, 請點(diǎn)擊這里,?data必須是一個(gè)函數(shù)

// 直接聲明的對象只占某一塊內(nèi)存空間，對它的所有引用共用該空間。

var data = {

? id: 'abc',

? count: 100

}

console.log('type:', typeof data)

var a = data

var b = data

console.log('a.id=', a.id)

a.id = '007'

console.log('a.id=', a.id)

console.log('b.id=', b.id)

// 方法每次返回的對象在內(nèi)存中占用不同塊空間，每個(gè)引用各自維護(hù)自己的空間。

function dfunc() {

? return {

? ? id: 'default_value',

? ? count: 1

? }

}

console.log('type:', typeof dfunc)

var a1 = dfunc()

var b1 = dfunc()

console.log('a1.id=', a1.id)

a1.id = '008'

console.log('a1.id=', a1.id)

console.log('b1.id=', b1.id)

猜測：

Vue 在獲取data 這個(gè)組件的成員時(shí)會(huì)先判斷其類型，如果是一個(gè)對象則直接引用，如果是一個(gè)函數(shù)則獲取函數(shù)的返回值。

以上代碼就是模擬Vue 獲取data 對象的過程，當(dāng)data 直接是一個(gè)對象時(shí)所有該組件的實(shí)例公用一份數(shù)據(jù)，當(dāng)data 時(shí)函數(shù)時(shí)每個(gè)組件實(shí)例維護(hù)自己的數(shù)據(jù)。

子組件里面的data是函數(shù)是因?yàn)楫?dāng)我們頁面中運(yùn)用同一個(gè)子組件多次，要是data只是一個(gè)對象的話，相同子組件就會(huì)共享這個(gè)data對象，這是一件非常糟糕的事情。寫成函數(shù)返回一個(gè)對象是想讓子組件有自己的data對象而不與其它組件共享

這是es6的語法，可以更好的優(yōu)化頁面性能吧