为何组件中的data必须是一个函数

理解这个问题，我们先看一个报错

警告说明：返回的data应该是一个函数在每一个组件实例中

我们继续看：

在vue实例上data定义的是一个对象，也可以是一个函数：

var app = new Vue({
    el:"#app",
    // 对象格式
    data:{
        foo:"foo"
    },
    // 函数格式
    data(){
        return {
             foo:"foo"
        }
    }
})

但是在vue组件中定义的data是一个函数：

// 定义一个名为myApp 的新组件
Vue.component('myApp', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<div>组件</div>'
})

但是如果我们将这个组件里的data定义为一个对象的话,就会出现一开始看到的的报错

Vue.component('component1',{
    template:`<div>组件</div>`,
    data:{
       count : 0
    }
})

为什么会出现这样情况呢？

当data是一个对象时，我们知道object类型是引用类型，data是一个指针，指向对象在堆内存中存储的地址。
如果组件中的data也是一个对象，那么在组件进行复用的时候，相当于这些组件共用的是一个data，一个组件中的data数据改变了，那么其他复用组件的数据也会跟着改变。这就降低了组件复用性和灵活性。

那么如果将组件的data定义为函数后，我们知道函数具有作用域，组件中的data设置为一个函数，相当于每个组件实例都有自己的作用域，那么局部作用域中的数据改变是不会影响其他作用域的，也就是说每个组件相互独立，互不影响。这样就保证了组件的复用性和灵活性。

总结：

根实例对象data可以是对象也可以是函数（根实例是单例），不会产生数据污染情况

组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。采用函数的形式，initData时会将其作为工厂函数都会返回全新data对象