大家好最近在唸vue
相信關於為什麼data要使用function已經被討論到爛掉
看了很多講解都是下面的例子
const MyComponent = function() {};
MyComponent.prototype.data ={
a: 1,
b: 2,
};
const component1 = new MyComponent();
const component2 = new MyComponent();
component1.data.b = 5;
console.log(component2.data)
↑因為會共享同一個reference

你的data不會永遠只用{a:1,b:2},要用別的就會把data拆出來如果只用object的話你直接改就會動讓每個實體的data都變成5,如果用callback的話才會讓this.data每次都是新的預設值

你的舉例是一樣意思，constructor也是function。不要在js使用prototype，語意會讓你誤會很多東西。

function隨時可呼叫，為什麼你會覺得constructor有比較好?data又不一定要是在new Component的時候呼叫，獨立的function之後如果需要取回data預設值，隨時都能呼叫data()怎麼會沒事想去選個最沒彈性的寫法

因為在設計的概念上就不想直接把data的內容寫進去啊然後那個例子就告訴你不用function的話就會把原型內的值一併改掉,所以不能用object應該用function,沒弄清楚的話先把例如裡面的值都print出來比較一下

沒有，原po最後一段用obj的寫法就已經不會共用ref了所以用func並不是必要，只是一種寫法選擇

感謝m大 原來我理解是錯的 那分別就只是那是沒有es6的寫法?

如果我沒弄錯，那寫法/機制應該上古時期就有了，ES6只多加入了更直觀的class宣告語法。所以多套一層func除了上面提到的回復預設值外，老實說我也想不到還有什麼其他好處...

不會共用的原因是因為用了function，只是前者叫data()後者是constructor，不要誤導人為何要用前者當範例，因為是好習慣與其糾結這個不如去看vue3

並不是，原po共列了3種寫法，1會共用，2跟3不會。根本的差別是1直接操作原型鍊物件的data的屬性，2跟3則寫在建構子裡，在初始化時會另生一份。所以賦值給data時是用func(2)還是物件(3)並不是是否會共用的原因。範例2裡的data()從來就沒有扮演建構子的角色1~3的建構子都同樣是MyComponent

這樣講沒有觸碰到本質，物件(3)不會共用是因為他的位置在建構子。偷用了正確方式來說他是對的根本狐假虎威把範例的建構子拿掉，在new之後才賦值給data比較清楚(2) component1.data = init()(3) component1.data = {...}說func不是必要，結果利用的建構子還是func，你紹安嗎

麻煩你看清楚，原po這篇本來就是在問為什麼都移到建構子裡了還要多用data()這個func，前面有人說是因為共用問題，我才會回覆說func並不是必要，因為根本的原因不在那裡另外你提到的「本質」我前面明明就講過一樣的了...

我覺得是原PO死讀書，雖然教學說data用function是避免重複用到同一個物件，但那就不是唯一的原因啊，本來就有很多方法達成這個效果，我相信寫講解的人也只是要表示「有這個效果是設計目標之一」而不是「只有這個設計能達這效果」