不是，vue元件中data必須是一個函數。 vue中元件是用來重複使用的，為了防止data重複使用，將其定義為函數。 vue元件中的data資料都應該是互相隔離，互不影響的，元件每復用一次，data資料就應該被複製一次，之後，當某一處複用的地方元件內data資料被改變時，其他重複使用地方元件的data資料不受影響，就需要透過data函數傳回一個物件作為元件的狀態。
本教學操作環境：windows7系統、vue3版，DELL G3電腦。
vue實例的時候定義data屬性既可以是一個對象，也可以是一個函數
const app = new Vue({
el:"#app",
// 对象格式
data:{
foo:"foo"
},
// 函数格式
data(){
return {
foo:"foo"
}
}
})但，元件中定義data屬性，只能是一個函數
如果為元件data直接定義為一個物件
Vue.component('component1',{
template:`<div>组件</div>`,
data:{
foo:"foo"
}
})則會得到警告訊息
警告說明：傳回的data應該是一個函數在每一個元件實例中
為什麼data屬性是一個函數而不是一個物件？
Vue元件中data屬性不能為物件原因是物件是參考類型，元件會被多個實例同時引用導致的結果就是多個實例共用一個對象，其中一個元件改變了data物件中的值，其他實例也會受到影響。
如圖所示，元件重複使用後，隨機點選其中一個元件中的按鈕其他兩個元件的數值也會受到影響
vue元件data為函數的原因：data為函數，透過return返回對象，可以實作每個實例都有自己獨立的對象，實例之間互不影響；如下圖所示
結論
根實例物件data可以是物件也可以是函數（根實例是單例），不會產生資料污染情況
元件實例物件data必須為函數，目的是為了防止多個元件實例物件之間共用一個data，產生資料污染。採用函數的形式，initData時會將其作為工廠函數都會傳回全新data物件
說明：
以上是vue元件中data不能是函數嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！
