不是，vue元件中data必須是一個(gè)函數(shù)。 vue中元件是用來重複使用的，為了防止data重複使用，將其定義為函數(shù)。 vue元件中的data資料都應(yīng)該是互相隔離，互不影響的，元件每復(fù)用一次，data資料就應(yīng)該被複製一次，之後，當(dāng)某一處複用的地方元件內(nèi)data資料被改變時(shí)，其他重複使用地方元件的data資料不受影響，就需要透過data函數(shù)傳回一個(gè)物件作為元件的狀態(tài)。

本教學(xué)操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。

vue實(shí)例的時(shí)候定義data屬性既可以是一個(gè)對象，也可以是一個(gè)函數(shù)

const app = new Vue({
    el:"#app",
    // 對象格式
    data:{
        foo:"foo"
    },
    // 函數(shù)格式
    data(){
        return {
             foo:"foo"
        }
    }
})

但，元件中定義data屬性，只能是一個(gè)函數(shù)

如果為元件data直接定義為一個(gè)物件

Vue.component('component1',{
    template:`<div>組件</div>`,
    data:{
        foo:"foo"
    }
})

則會得到警告訊息

警告說明：傳回的data應(yīng)該是一個(gè)函數(shù)在每一個(gè)元件實(shí)例中

為什麼data屬性是一個(gè)函數(shù)而不是一個(gè)物件？

Vue元件中data屬性不能為物件原因是物件是參考類型，元件會被多個(gè)實(shí)例同時(shí)引用導(dǎo)致的結(jié)果就是多個(gè)實(shí)例共用一個(gè)對象，其中一個(gè)元件改變了data物件中的值，其他實(shí)例也會受到影響。

如圖所示，元件重複使用後，隨機(jī)點(diǎn)選其中一個(gè)元件中的按鈕其他兩個(gè)元件的數(shù)值也會受到影響

vue元件data為函數(shù)的原因：data為函數(shù)，透過return返回對象，可以實(shí)作每個(gè)實(shí)例都有自己獨(dú)立的對象，實(shí)例之間互不影響；如下圖所示

結(jié)論

根實(shí)例物件data可以是物件也可以是函數(shù)（根實(shí)例是單例），不會產(chǎn)生資料污染情況

元件實(shí)例物件data必須為函數(shù)，目的是為了防止多個(gè)元件實(shí)例物件之間共用一個(gè)data，產(chǎn)生資料污染。採用函數(shù)的形式，initData時(shí)會將其作為工廠函數(shù)都會傳回全新data物件

說明：

• ##vue中元件是用來復(fù)用的，為了防止data復(fù)用，將其定義為函數(shù)。

• vue元件中的data資料都應(yīng)該是互相隔離，互不影響的，元件每復(fù)用一次，data資料就應(yīng)該被複製一次，之後，當(dāng)某處複用的地方元件內(nèi)data資料改變時(shí)，其他複用地方元件的data資料不受影響，就需要透過data函數(shù)傳回一個(gè)物件作為元件的狀態(tài)。

• 當(dāng)我們將元件中的data寫成一個(gè)函數(shù)，資料以函數(shù)傳回值形式定義，這樣每複用一次元件，就會傳回一份新的data，擁有自己的作用域，類似於為每個(gè)元件實(shí)例建立一個(gè)私有的資料空間，讓各個(gè)元件實(shí)例維護(hù)各自的資料。

• 當(dāng)我們元件的date單純的寫成物件形式，這些實(shí)例用的是同一個(gè)建構(gòu)函數(shù)，由於JavaScript的特性所導(dǎo)致，所有的元件實(shí)例共用了一個(gè)data，就會造成一個(gè)變了全都會變的結(jié)果。

web前端開發(fā)、程式設(shè)計(jì)基礎(chǔ)影片）

以上是vue元件中data不能是函數(shù)嗎的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！