vue基础：vue中组件的data为什么是一个函数

1.组件是可复用的vue实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用了多少次，组件中的data数据都应该是相互隔离，互不影响的，基于这一理念，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响，如下面这个例子：

<template lang="html">
  <div class="p-user">
  	<div class="user-main">
	   <div class="btn-count">
		<h1>按钮被点击了{{ count }}次</h1>
		<button @click="handleClick">点击</button>
	</div>
   </div>
  </div>
</template>

<script>
export default {
	data(){
		return {	
				count:0
		}
	},
	methods:{
      handleClick(){
      	this.count++
      }
	}
}

该组件被复用了三次，但每个复用的地方组件内的count数据相互不受影响，它们各自维护各自内部的count。 之所以3个组件数据互不影响，主要是data不是一个单纯的对象，而是一个函数返回值的形式，所以每个组件实例可以维护一份被返回对象的独立拷贝。 如果我们将上述例子中的data修改为：

data:{
		count:0
	}

那么就会造成无论在哪个组件里改变了count值，都会影响到其他两个组件里的count。这是因为当data如此定义后，这就表示所有的组件实例共用了一份data数据，因此，无论在哪个组件实例中修改了data,都会影响到所有的组件实例。

所以组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，相当于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。