为什么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属性通过模板渲染到页面上。

但在官方文档的Vue组件基础这一节中却明确指出：一个组件的 data 选项必须是一个函数

注意：图中最下方告诉我们，如果没有这条规则，那么就会出现同一组件的不同实例之间牵一发而动全身的问题。 

2、为什么组件中的data必须是函数

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