Vue 中 data 為什么必須是一個函數

為什么 Vue 中的 data 必須是個函數？

官方文檔的解釋如下：

為什么會出現上述“影響到其它所有實例”的情況呢？

其實這個問題取決於 JS 原型鏈知識，而非 Vue
我們先來看不是函數的情況：

function Component() {
}

Component.prototype.data = {
  name: 'Morty',
  age: 14,
}

var componentA = new Component()
var componentB = new Component()

componentA.data.age = 40

console.log(componentA, componentB)  // 40 40

可以看到，componentA 和 componentB data 之間指向了同一個內存地址，age 都變成了 40，導致了問題
因此，data 如果單純的寫成對象形式，會使得所有組件實例共用了一份 data，造成一個變了全都會變的結果
接下來我們用函數改造以上代碼：

function Component() {
  this.data = this.data()
}

Component.prototype.data = function () {
  return {
    name: 'Morty',
    age: 14,
  }
}

var componentA = new Component()
var componentB = new Component()

componentA.data.age = 40

console.log(componentA, componentB)  // 40 14

這就很好的解釋了為什么 Vue 組件中的 data 需要用函數了，當 data 是函數的時候，每一個實例的 data 屬性都是獨立的，互不影響

注意：new Vue 的實例是不會被復用的，因此不存在引用對象的問題

總結

Vue 中的 data 必須是個函數，因為當 data 是函數時，組件實例化的時候這個函數將會被調用，返回一個對象，計算機會給這個對象分配一個內存地址，實例化幾次就分配幾個內存地址，他們的地址都不一樣，所以每個組件中的數據不會相互干擾，改變其中一個組件的狀態，其它組件不變
簡單來說，就是為了保證組件的獨立性和可復用性，如果 data 是個函數的話，每復用一次組件就會返回新的 data，類似於給每個組件實例創建一個私有的數據空間，保護各自的數據互不影響