鍍金池/ 問答/HTML/ 關(guān)于vue實例中data的寫法

關(guān)于vue實例中data的寫法

問題描述

發(fā)現(xiàn)vue實例中，data的寫法可以有下面兩種：

//函數(shù)形式
data(){
    return{
        limit:3, 
        ...
    }
}

//對象形式
data:{
     limit:3, 
     ...
}

想問一下這兩種方式有什么區(qū)別

回答
編輯回答
青裙

vue-cli需要用函數(shù)形式，對象形式是引入寫法

2018年6月18日 18:12
編輯回答
柒喵

不管哪種寫法，目的只有一個保持數(shù)據(jù)獨立空間，而不是很多組件指向同一個data的引用。

vue通過組裝各個組件掛在dom樹，如果data是一個Object，那么試想一下多次調(diào)用組件會產(chǎn)生什么現(xiàn)象，因為Object通過引用傳遞，那么所有組件操作的數(shù)據(jù)通過地址引用都指向同一塊堆，都操作同一塊數(shù)據(jù)，勢必造成狀態(tài)混亂，實例a組件會影響b組件的數(shù)據(jù)。
這里僅僅是為了保持狀態(tài)獨立，所以 通過一個函數(shù)，實際上是每次返回一個新的 數(shù)據(jù)對象，即使不使用函數(shù)，只要你能保證 每次都是一個新數(shù)據(jù)的copy也是可以的。 這里的函數(shù)不過是一個 函數(shù) 工廠而已，工廠模式的一種運用。

2017年6月15日 04:11
編輯回答
孤酒

第一種是寫在component組件中的；（組件匯總必須這么寫）
第二種是寫在vue實例中的；（實例中的寫法也是固定的不能混用）

2017年8月1日 08:27