Vue中为组件绑定数据为什么要使用data()函数而不使用data对象的方式 Vue中为组件绑定数据为什么要

一个加数器的例子：

="../js/vue.js"> > // 注册全局组件 Vue.component('cpn', { template: '#cpn', data(){ return { counter: 0 } } }); new Vue({ el: "#num" })

运行之后：

文章图片

这是将加数器组件使用了三次，现在点击第一个加数器按钮：

文章图片

第一个计数值增加了，但是后面两个计数没有增加，说明这三个组件实例并不是共用的同一个组件data数据对象。
使用data()方法返回数据对象：

data(){ return { counter: 0 } }

【Vue中为组件绑定数据为什么要使用data()函数而不使用data对象的方式】每一次返回的对象都是新的对象，会重新创建内存地址，
如果使用这种方式：

data: { counter: 0 }

那么每个组件实例都会共享同一个数据对象，这会影响组件的独立使用。

Vue中为组件绑定数据为什么要使用data()函数而不使用data对象的方式