使用组件时，大多数选项可以被传入到 Vue 构造器中，有一个例外： data必须是函数。 实际上，如果你这么做：
Vue.component('my-component', { template: '<span>{{ message }}</span>', data: { message: 'hello' } })
那么 Vue 会在控制台发出警告，告诉你在组件中 data 必须是一个函数。最好理解这种规则的存在意义。
HTML代码：
<div id="example-2"> <simple-counter></simple-counter> <simple-counter></simple-counter> <simple-counter></simple-counter> </div>
JS代码：
var data = { counter: 0 } Vue.component('simple-counter', { template: '<button v-on:click="counter += 1">{{ counter }}</button>', // data 是一个函数，因此 Vue 不会警告， // 但是我们为每一个组件返回了同一个对象引用 data: function () { return data } }) new Vue({ el: '#example-2' })
效果图：
由于这三个组件共享了同一个 data ， 因此增加一个 counter 会影响所有组件！我们可以通过为每个组件返回新的 data 对象来解决这个问题：
data: function () { return { counter: 0 } }
现在每个 counter 都有它自己内部的状态了：
