類型：Object | Function
限制：組件的定義只接受 function。
詳細：
Vue 實例的數據對象。Vue 會遞歸地把 data 的 property 轉換為 getter/setter，從而讓 data 的 property 能夠響應數據變化。對象必須是純粹的對象 (含有零個或多個的 key/value 對)：瀏覽器 API 創建的原生對象，原型上的 property 會被忽略。大概來說，data 應該只能是數據 - 不推薦觀察擁有狀態行為的對象。

一旦觀察過，你就無法在根數據對象上添加響應式 property。因此推薦在創建實例之前，就聲明所有的根級響應式 property。

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

以 _ 或 $ 開頭的 property 不會被 Vue 實例代理，因為它們可能和 Vue 內置的 property、API 方法沖突。你可以使用例如 vm.$data._property 的方式訪問這些 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 property 使用了箭頭函數，則 this 不會指向這個組件的實例，不過你仍然可以將其實例作為函數的第一個參數來訪問。

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

深入響應式原理（下面是官網上總結的：）

如何追蹤變化
當你把一個普通的 JavaScript 對象傳入 Vue 實例作為 data 選項，Vue 將遍歷此對象所有的 property，并使用 Object.defineProperty 把這些 property 全部轉為 getter/setter。Object.defineProperty 是 ES5 中一個無法 shim 的特性，這也就是 Vue 不支持 IE8 以及更低版本瀏覽器的原因。

這些 getter/setter 對用戶來說是不可見的，但是在內部它們讓 Vue 能夠追蹤依賴，在 property 被訪問和修改時通知變更。這里需要注意的是不同瀏覽器在控制臺打印數據對象時對 getter/setter 的格式化并不同，所以建議安裝 vue-devtools 來獲取對檢查數據更加友好的用戶界面。

每個組件實例都對應一個 watcher 實例，它會在組件渲染的過程中把“接觸”過的數據 property 記錄為依賴。之后當依賴項的 setter 觸發時，會通知 watcher，從而使它關聯的組件重新渲染。

檢測變化的注意事項
由于 JavaScript 的限制，Vue 不能檢測數組和對象的變化。盡管如此我們還是有一些辦法來回避這些限制并保證它們的響應性。
Vue 無法檢測 property 的添加或移除。由于 Vue 會在初始化實例時對 property 執行 getter/setter 轉化，所以 property 必須在 data 對象上存在才能讓 Vue 將它轉換為響應式的。例如：

var vm = new Vue({data:{a:1}
})// `vm.a` 是響應式的vm.b = 2
// `vm.b` 是非響應式的

對于已經創建的實例，Vue 不允許動態添加根級別的響應式 property。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套對象添加響應式 property。例如，對于：

Vue.set(vm.someObject, 'b', 2)

有時你可能需要為已有對象賦值多個新 property，比如使用 Object.assign() 或 _.extend()。但是，這樣添加到對象上的新 property 不會觸發更新。在這種情況下，你應該用原對象與要混合進去的對象的 property 一起創建一個新的對象。

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

Vue 不能檢測以下數組的變動：

當你利用索引直接設置一個數組項時，例如：vm.items[indexOfItem] = newValue
當你修改數組的長度時，例如：vm.items.length = newLength
舉個例子：

var vm = new Vue({data: {items: ['a', 'b', 'c']}
})
vm.items[1] = 'x' // 不是響應性的
vm.items.length = 2 // 不是響應性的

為了解決第一類問題，以下兩種方式都可以實現和 vm.items[indexOfItem] = newValue 相同的效果，同時也將在響應式系統內觸發狀態更新：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

你也可以使用 vm.$set 實例方法，該方法是全局方法 Vue.set 的一個別名：

vm.$set(vm.items, indexOfItem, newValue)

為了解決第二類問題，你可以使用 splice：

vm.items.splice(newLength)

由于 Vue 不允許動態添加根級響應式 property，所以你必須在初始化實例前聲明所有根級響應式 property，哪怕只是一個空值：

var vm = new Vue({data: {// 聲明 message 為一個空值字符串message: ''},template: '<div>{{ message }}</div>'
})
// 之后設置 `message`
vm.message = 'Hello!'

如果你未在 data 選項中聲明 message，Vue 將警告你渲染函數正在試圖訪問不存在的 property。
這樣的限制在背后是有其技術原因的，它消除了在依賴項跟蹤系統中的一類邊界情況，也使 Vue 實例能更好地配合類型檢查系統工作。但與此同時在代碼可維護性方面也有一點重要的考慮：data 對象就像組件狀態的結構 (schema)。提前聲明所有的響應式 property，可以讓組件代碼在未來修改或給其他開發人員閱讀時更易于理解。

異步更新隊列

可能你還沒有注意到，Vue 在更新 DOM 時是異步執行的。只要偵聽到數據變化，Vue 將開啟一個隊列，并緩沖在同一事件循環中發生的所有數據變更。如果同一個 watcher 被多次觸發，只會被推入到隊列中一次。這種在緩沖時去除重復數據對于避免不必要的計算和 DOM 操作是非常重要的。然后，在下一個的事件循環“tick”中，Vue 刷新隊列并執行實際 (已去重的) 工作。Vue 在內部對異步隊列嘗試使用原生的 Promise.then、MutationObserver 和 setImmediate，如果執行環境不支持，則會采用 setTimeout(fn, 0) 代替。

例如，當你設置 vm.someData = 'new value'，該組件不會立即重新渲染。當刷新隊列時，組件會在下一個事件循環“tick”中更新。多數情況我們不需要關心這個過程，但是如果你想基于更新后的 DOM 狀態來做點什么，這就可能會有些棘手。雖然 Vue.js 通常鼓勵開發人員使用“數據驅動”的方式思考，避免直接接觸 DOM，但是有時我們必須要這么做。為了在數據變化之后等待 Vue 完成更新 DOM，可以在數據變化之后立即使用 Vue.nextTick(callback)。這樣回調函數將在 DOM 更新完成后被調用。例如：

<div id="example">{{message}}</div>
var vm = new Vue({el: '#example',data: {message: '123'}
})
vm.message = 'new message' // 更改數據
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {vm.$el.textContent === 'new message' // true
})

在組件內使用 vm.$nextTick() 實例方法特別方便，因為它不需要全局 Vue，并且回調函數中的 this 將自動綁定到當前的 Vue 實例上：

Vue.component('example', {template: '<span>{{ message }}</span>',data: function () {return {message: '未更新'}},methods: {updateMessage: function () {this.message = '已更新'console.log(this.$el.textContent) // => '未更新'this.$nextTick(function () {console.log(this.$el.textContent) // => '已更新'})}}
})

因為 $nextTick() 返回一個 Promise 對象，所以你可以使用新的 ES2017 async/await 語法完成相同的事情：

methods: {updateMessage: async function () {this.message = '已更新'console.log(this.$el.textContent) // => '未更新'await this.$nextTick()console.log(this.$el.textContent) // => '已更新'}
}