data屬性文件

轉自：https://cn.vuejs.org/v2/api/#data
專案上，遇到的坑，加深印象

data

• 型別: Object | Function
• 限制: 元件的定義只接受function。
• 詳細:
  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
vm.$data === data

var Component = Vue.extend({
	data: function(){
		return { a: 1 }
	}
})

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

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