Vue為什麼必須使用函數來定義資料

使用Vue時，你可能會問自己“為什麼必須使用返回物件的函數來定義data，而不僅僅是一個物件呢？”

特別是考慮到在某些地方，data 並不是一個函數，比如在一些示例中的App組件中。

答案是，當組件被多次使用時，如果data不是一個函數，而是一個普通的物件，如下所示：

1
2
3

data: {
  counter: 0
}

那麼根據JavaScript的工作方式，每個組件實例將共享這個屬性。

這在99.9%的情況下都不是你想要的，相反你應該這樣做：

data: function() {
  return {
    counter: 0
  }
}

一開始可能不直觀，但一旦你接受這個解釋，並了解它對你的應用程式是有害的，也是可能引發錯誤的潛在來源，你就會記住總是使用一個函數來定義資料。

tags: [“Vue”, “data function”, “JavaScript”]