在Vue组件中，data是用来定义组件的状态信息。为了保证每个组件实例的状态都是独立的，Vue规定data必须是一个函数。
如果将data定义为一个普通对象，则所有组件实例将共享同一个数据对象，当一个实例改变数据时，将影响到所有其他实例。例如：
Vue.component('my-component', { data: { counter: 0 }, template: '<div @click="counter++">{{ counter }}</div>' })
上面的代码会导致所有my-component实例共享同一个计数器，当任何一个实例点击后，所有实例都将反映出这个变化，这显然不是我们期望的结果。
为了避免共享状态的问题，Vue要求将data定义为一个返回数据对象的函数。每次创建组件实例时，Vue都会调用这个函数来返回一个新的数据对象，从而保证每个组件实例都有自己的独立数据。例如：
Vue.component('my-component', { data: function () { return { counter: 0 } }, template: '<div @click="counter++">{{ counter }}</div>' })
这样定义之后，每个my-component实例都有自己的计数器，它们之间不会互相影响。
