1. 前言
在學習vue的時候，一直納悶一件事：組件的data數據為什么必須要以函數返回的形式，為什么不是簡單的對象形式呢？遂帶着問題去翻官方文檔，文檔中自然也寫明了這么做的原因，本篇博文以官方文檔給出的原因為基礎，並加上具體的例子，來闡述這么設計的原因。
2.正文
組件是可復用的vue實例，一個組件被創建好之后，就可能被用在各個地方，而組件不管被復用了多少次，組件中的data數據都應該是相互隔離，互不影響的，基於這一理念，組件每復用一次，data數據就應該被復制一次，之后，當某一處復用的地方組件內data數據被改變時，其他復用地方組件的data數據不受影響，如下面這個例子：
<template>
<div class="title">
<h1>按鈕被點擊了{{ count }}次</h1>
<button v-on:click="count++">點擊</button>
</div>
</template>
<script>
export default {
name: 'BtnCount',
data () {
return {
count: 0
}
}
}
</script>
<style scoped>
.title {
background-color: red
}
</style>
該組件被復用了三次，但每個復用的地方組件內的count數據相互不受影響，它們各自維護各自內部的count。
能有這樣效果正是因為上述例子中的data不是一個單純的對象，而是一個函數返回值的形式，所以每個組件實例可以維護一份被返回對象的獨立拷貝，如果我們將上述例子中的data修改為：
data : {
count: 0
}
那么就會造成無論在哪個組件里改變了count值，都會影響到其他兩個組件里的count。
這是因為當data如此定義后，這就表示所有的組件實例共用了一份data數據，因此，無論在哪個組件實例中修改了data,都會影響到所有的組件實例。
3.總結
組件中的data寫成一個函數，數據以函數返回值形式定義，這樣每復用一次組件，就會返回一份新的data，類似於給每個組件實例創建一個私有的數據空間，讓各個組件實例維護各自的數據。而單純的寫成對象形式，就使得所有組件實例共用了一份data，就會造成一個變了全都會變的結果。
（完）