Vue 組件的data必須是一個函數

// 定義一個名為 button-counter 的新組件
Vue.component('button-counter', {
 data: function () {
 return {
 count: 0
 }
 },
 template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

組件是可復用的 Vue 實例，且帶有一個名字：在這個例子中是 <button-counter>。我們可以在一個通過 new Vue 創建的 Vue 根實例中，把這個組件作為自定義元素來使用：

<div id="components-demo">
 <button-counter></button-counter>
</div>

new Vue({ el: '#components-demo' })

因為組件是可復用的 Vue 實例，所以它們與 new Vue 接收相同的選項，例如 data、computed、watch、methods 以及生命周期鈎子等。

僅有的例外是像 el 這樣根實例特有的選項。

 

當我們定義這個 <button-counter> 組件時，你可能會發現它的 data 並不是像這樣直接提供一個對象：

data: {
 count: 0
}

取而代之的是，一個組件的 data 選項必須是一個函數，因此每個實例可以維護一份被返回對象的獨立的拷貝：

data: function () {
 return {
 count: 0
 }
}