Vue组件中的data必须是一个function Vue

组件可以有自己的data，并且data必须是一个function。
在下面这个例子中，data 返回了一个在外部定义的对象。并且这个组件在页面中使用了3次，点击+1时出现了如下情况：data中的count属性影响到了所有实例。
【Vue组件中的data必须是一个function】
文章图片

#app{ margin:20px; }

而当data选项是一个函数的时候，每个实例可以维护一份被返回对象的独立的拷贝，这样各个实例中的data不会相互影响，是独立的。

Vue.component('counter',{ template:'#tmp1', data:function(){ return {count:0} }, methods:{ increment(){ this.count++ } } })

文章图片

Vue组件中的data必须是一个function