Vue.js的data是要一個對象還是一個function
3 回答
蕭十郎
TA貢獻1815條經驗 獲得超13個贊
Vue 實例的數據對象。Vue.js 會遞歸地將它全部屬性轉為 getter/setter，從而讓它能響應數據變化。這個對象必須是普通對象：原生對象，getter/setter 及原型屬性會被忽略。不推薦觀察復雜對象。
在實例創建之后，可以用 vm.$data 訪問原始數據對象。Vue 實例也代理了數據對象所有的屬性。
在定義組件時，同一定義將創建多個實例，此時 data 必須是一個函數，返回原始數據對象。如果 data 仍然是一個普通對象，則所有的實例將指向同一個對象！換成函數后，每當創建一個實例時，會調用這個函數，返回一個新的原始數據對象的副本。
以上內容均來自官網，說得很清楚啊。
文件寫成.vue的文件就是組件的寫法，因此這時data必須是一個函數，而你貼的var vm = new Vue({})是直接跑在瀏覽器環境下的用法，這時data可以是一個普通對象，也可以寫成一個返回普通對象的函數，不過沒必要。
素胚勾勒不出你
TA貢獻1827條經驗 獲得超9個贊
在一個普通的 Vue app 中，data 是一個對象： new Vue( { data : { title : 'abc' } } ); 在 Vue 的 Component 中，data 要寫成一個 function，并返回對象： Vue.component( 'component-name'
慕森卡
TA貢獻1806條經驗 獲得超8個贊
在一個普通的 Vue app 中，data 是一個對象：
1 2 3 4 5 6 7 8 9 | new Vue( {
data : {
title : 'abc'
}
} ); |
在 Vue 的 Component 中，data 要寫成一個 function，并返回對象：
1 2 3 4 5 6 7 8 9 10 11 12 13 | Vue.component( 'component-name', Vue.extend( {
data : function() {
return {
title : 'abc'
};
}
} ) ); |
添加回答
舉報
0/150
提交
取消