为什么Vue组件中的data是一个函数，而不是一个对象

Vue组件中data为什么是一个函数

首先我们来看一看Vue官方文档上的一个demo

可以看到在这个demo中，data是一个对象，通过new一个新的Vue实例，将data中的message属性直接渲染到页面上。

但是在官方文档的组件基础部分，在讲到组件的复用时说到一个组件的data必须是一个函数
那么究竟是为什么呢？相信很多刚接触的小伙伴都有这个疑问。让我们首先来看一下官方文档的解释

文档中提到，当组件的data是一个函数的时候，在每一次实例化这个组件时，都会得到一份独立的拷贝，那么当这个组件在复用时，data中的属性就不会相互影响。

如果大家到这都还不是很明白，那么接着往下看

组件化开发，有一个特别好的特性，那就是组件的复用。当我们在定义组件时，如果data直接写成一个对象，如

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data {
      count: 0
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

这样当我们在对其进行复用的时候

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

这三个实例化的组件，会共享一个同一个data，这是页面第一次渲染的样子，当你只点击其中一个按钮

变为了：

由此可见，当定义组件时，如果data是一个对象，那么复用的组件将共享同一个data，这会导致点击其中一个按钮就可能会影响到其它所有实例。

而当组件中的data是一个函数时，通过return，每次都返回一份对象的独立拷贝，当组件进行复用时，也就不会相互影响了，这也是我们想要达到的效果

希望能够帮助到大家，如有错误，欢迎指正