在Vue的組件基礎中有這樣一句話：data必須是一個函數。
爲什麼data必須是一個函數呢？
我們來看Vue在聲明式渲染中給出的一個demo：
<div id="app">{{ message }}</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
在這個demo中data是一個對象，通過 new Vue 創建的 Vue 實例中，我們直接把data上的message屬性通過模板渲染到頁面上去了。這個data我們只在當前頁面掛載的div#app這個點上使用，但是組件是可以被複用的，所以我們全局註冊一個組件來分析。
先假設將data作爲一個對象:
我們前面說組件是可以被複用的，那麼註冊了一個組件本質上就是創建了一個組件構造器的引用，而真正當我們使用組件的時候纔會去將組件實例化。
這裏可以發現當使用組件的時候，雖然data是在構造器的原型鏈上被創建的，但是實例化的component1和component2卻是共享同樣的data對象,當你修改某一個實例的data對象的一個屬性的時候，公用的data對象也會發生改變，這明顯不是我們想要的效果。
這裏可以看到，而當data是一個函數的時候，每一個實例的data屬性都是獨立的，不會相互影響了。
總結：
綜上可知，如果data是一個函數的話，這樣每複用一次組件，就會返回一份新的data，類似於給每個組件實例創建一個私有的數據空間，讓各個組件實例維護各自的數據。而單純的寫成對象形式，就使得所有組件實例共用了一份data，就會造成一個變了全都會變的結果。
所以說vue組件的data必須是函數。這都是因爲js的特性帶來的，跟vue本身設計無關。
js本身的面向對象編程也是基於原型鏈和構造函數，應該會注意原型鏈上添加一般都是一個函數方法而不會去添加一個對象了。