【Vue】定義組件 data 必須是一個函數返回的對象

Vue 實例的數據對象。Vue 將會遞歸將 data 的屬性轉換為 getter/setter，從而讓 data 的屬性能夠響應數據變化。對象必須是純粹的對象 (含有零個或多個的 key/value 對)：瀏覽器 API 創建的原生對象，原型上的屬性會被忽略。大概來說，data 應該只能是數據 - 不推薦觀察擁有狀態行為的對象。

 

一旦觀察過，不需要再次在數據對象上添加響應式屬性。因此推薦在創建實例之前，就聲明所有的根級響應式屬性。

 

實例創建之后，可以通過 vm.$data 訪問原始數據對象。Vue 實例也代理了 data 對象上所有的屬性，因此訪問 vm.a 等價於訪問 vm.$data.a。

 

以 _ 或 $ 開頭的屬性 不會 被 Vue 實例代理，因為它們可能和 Vue 內置的屬性、API 方法沖突。你可以使用例如 vm.$data._property 的方式訪問這些屬性。

 

當一個組件被定義，data 必須聲明為返回一個初始數據對象的函數，因為組件可能被用來創建多個實例。如果 data 仍然是一個純粹的對象，則所有的實例將共享引用同一個數據對象！通過提供 data 函數，每次創建一個新實例后，我們能夠調用 data 函數，從而返回初始數據的一個全新副本數據對象。

 

如果需要，可以通過將 vm.$data 傳入 JSON.parse(JSON.stringify(...)) 得到深拷貝的原始數據對象。

var data = { a: 1 }

// 直接創建一個實例
var vm = new Vue({
  data: data
})
vm.a // => 1
vm.$data === data // => true

// Vue.extend() 中 data 必須是函數
var Component = Vue.extend({
  data: function () {
    return { a: 1 }
  }
})

 

注意，如果你為 data 屬性使用了箭頭函數，則 this 不會指向這個組件的實例，不過你仍然可以將其實例作為函數的第一個參數來訪問。

data: vm => ({ a: vm.myProp })

 

文章來自Vue官網介紹：https://cn.vuejs.org/v2/api/index.html#data