Vue - 為什麼 Vue 元件中的 data 必須是一個 Function 函數

元件與 data 用處

Vue 的元件是被拿來給其他頁面複用
假如 data 是一個對象，這也就表示作用域其實沒有分開，在使用時會互相影響。
因此，data 必須使用 Function 函數，來確保每個元件的 data 屬性值是不相影響的

JS 特性 or Vue 設計?

如果使用 Object 的話，也會發生每個元件 data 會互相影響。
在 JS 中只有 Function 能構成作用域，當 data 是一個函數，意味著每個元件有自己的作用域，相互獨立。

• 當 data 是 Object 時:
  兩個元件同時使用同一份 Object，修改其中一個屬性，也會同時修改到一個元件的。

const MyComponent = function() {}; 
MyComponent.prototype.data = {     
  a: 1,     
  b: 2, 
} 
const component1 = new MyComponent(); 
const component2 = new MyComponent(); 

component1.data.a === component2.data.a; // true;
 
component1.data.b = 5; 
component2.data.b // 5

• 當 data 是 Function:

const MyComponent = function() {     
  this.data = this.data(); 
}; 
MyComponent.prototype.data = function() {     
  return {         
    a: 1,        
    b: 2,     
  } 
};

結論

由以上範例可知， Vue 元件中的 data 必須是 Function 是因為受到 JavaScript 本身特性 所得的結果。

參考資料

從原型鏈的角度看 -> 為什麼 Vue 組件中的 data 必須是一個 Function 函數