Vue中的數據data

[LeoWangJ]

為什麼使用new 創建一個vue實例時data可以直接使用物件來定義，而在組件中的data卻必須使用function來return 一個物件呢？

原因是物件是引用類型，每個組件中的data都是共用相同內存，所以一個數值改變時，其他組件就會跟著變。

先看一下下面的範例

var component = function(){}
component.prototype.data = {
  a:1,
  b:2
}

var test1 = new component()
var test2 = new component()

test1.prototype.data == test2.prototype.data // true
test1.prototype.data = 10;
console.log(test2.prototype.data) // 10

上述data就是類似我們傳入vue組件的data，所以當創建組件時你傳入是物件時，會將每個組件的data指向同一個地址。 若使用function return 一個物件時，則會造成作用域，來確保每個組建都用自己的物件，而不會共用。

參考