vue 组件中为什么data是函数而不是对象

1、声明式渲染
vue文档在声明式渲染这一节中给了我们这样的一个demo:

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

在这个demo中data是一个对象，通过 new Vue 创建的 Vue实例中，我们直接把data上的message属性通过模板渲染到页面上去了。
声明式渲染的demo中data我们只在当前页面的挂载的div#app这个点上使用

2、组件中的data
但是在文档上Vue组件基础这一节中却告诉我们：一个组件的 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也会发生改变，这明显不是我们想要的效果。
当data是一个函数的时候，每一个实例的data属性都是独立的，不会相互影响了。你现在知道为什么vue组件的data必须是函数了吧。这都是因为js本身的特性带来的，跟vue本身设计无关。
vue的组件可能会存在多个实例，如果使用对象的形式定义data,当中的状态会产生数据污染，影响所有的组件实例，一个状态发生变化其他的状态也会跟着发生变化。
如果使用函数的形式定义，在initDate的时候每次都会创建一个新的data对象，虽然数据一样但指向不同的引用，数据不会污染。
根实例在创建的过程中不会存在这种限制，因为根实例只有一个