组件中data为什么是个函数

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

为什么data必须是一个函数

为什么组件中data必须是一个函数了而不是对象, 我们首先来看一下第一个声明式渲染的demo中data我们只在当前页面的挂载的div#app这个点上使用，但是对于组件有一个很明显的特性是在于它是可以被复用的，

假设data不是一个函数，控制台会直接报错！

假设将data作为一个对象:
我们前面说组件是可以被复用的，那么注册了一个组件本质上就是创建了一个组件构造器的引用，而真正当我们使用组件的时候才会去将组件实例化

// 创建一个组件
var Component= function() {
}
Component.prototype.data = {
  a: 1,
  b: 2
}

// 使用组件
var component1 = new Component()
var component2 = new Component()
component1.data.b = 3
component2.data.b   // 3

我们可以发现当我们使用组件的时候，虽然data是在构造器的原型链上被创建的，但是实例化的component1和component2确是共享同样的data对象,当你修改一个属性的时候，data也会发生改变

var Component= function() {
}
Component.prototype.data = function() {
  return {
     a: 1,
     b: 2
  }
}

// 使用组件
var component1 = new Component()
var component2 = new Component()
component1.data.b = 3
component2.data.b   // 2

Vue官网

js本身的面向对象编程也是基于原型链和构造函数，应该会注意原型链上添加一般都是一个函数方法而不会去添加一个对象了

总结

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

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