为什么每一个组件实例都需要有自己的状态（以及组件的data属性为啥必须是函数且需要返回一个对象）为什么每一个组件实例都需要

解答如下

函数每执行一次，会分配新的内存地址。
函数返回新的对象，新的对象相互独立，因此不会相互影响。
组件data的属性只是在本地组件范围内有效，采用函数返回的形式，不会造成跨组件的变量污染。

下面举一个计数器的例子来详细解释

计数器 - 锐客网当前数值：{{count}} src="https://www.it610.com/article/js/vue.js"> > const vm = new Vue({ el:"#app", data:{ count:0 } })

1.首先，我们将下面这个计数器抽取成一个组件。
代码：

Document - 锐客网 src="https://www.it610.com/article/js/vue.js"> > Vue.component('cpn',{ template:'#cpn', data(){ return { counter:0 } }, methods:{ increment(){ this.counter++ }, decrement(){ this.counter-- } } }) const vm = new Vue({ el:'#app' })

【为什么每一个组件实例都需要有自己的状态（以及组件的data属性为啥必须是函数且需要返回一个对象）】浏览器页面：

文章图片

这是我们所希望的效果，组件之间相互独立，互不影响。点击计数器一并不会导致计数器二、三跟着变化。
2.接下来演示跨组件变量污染的情况（将返回的对象定义在外部，data内不会每次返回一个新的对象了）
代码：

Document - 锐客网 src="https://www.it610.com/article/js/vue.js"> > const obj = { counter:0 } Vue.component('cpn',{ template:'#cpn', data(){ return obj }, methods:{ increment(){ this.counter++ }, decrement(){ this.counter-- } } }) const vm = new Vue({ el:'#app' })

浏览器界面：