1. 问题分析
对于这个问题，大多数人可能都有所注意，但是却没有过多的在意，那么接下来我就来简单分析一下，希望各位读者能够有所收获。
首先，我们来分析一下这个data：
在我们初次接触vue的时候，我们大多都是在页面中引入vue.js，然后在页面中直接创建一个Vue根实例，代码如下：
<html>
<body>
<div id='demon'>
<h1>{{msg}}</h1>
</div>
</body>
<script src="./vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#demo",
data:{
msg:'Hello Vue!';
}
})
</script>
</html>?这段代码相信接触过vue的朋友都很熟悉了，但这一次，我们需要将关注点放在data上。
此时的data就是一个对象，看起来没有丝毫问题，代码也没有报错，可以正常显示，我们接着往下分析。
当我们接触了vue组件化的概念之后，问题也就出现了：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue/dist/vue.js"></script>
</head>
<body>
<div id="demo">
<h1>vue组件data为什么必须是个函数？</h1>
<comp></comp>
<comp></comp>
</div>
</body>
<script>
// 这是一个自定义组件
Vue.component('comp', {
template: '<div @click="counter++">{{counter}}</div>',
data() {
return {
counter: 1
}
}
})
const app = new Vue({
el: "#demo",
})
</script>
</html>观察上述代码中的data，我们可以清楚的看到它（data）是一个函数，而且它的内部利用return返回了一个属性counter，也就是我们定义的属性，此时，页面可以正常显示，也无任何错误；
那么我们再来看：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue/dist/vue.js"></script>
</head>
<body>
<div id="demo">
<h1>vue组件data为什么必须是个函数？</h1>
<comp></comp>
<comp></comp>
</div>
</body>
<script>
Vue.component('comp', {
template: '<div @click="counter++">{{counter}}</div>',
data: {
counter: 1
}
const app = new Vue({
el: "#demo",
})
</script>上述代码中，我只是将data变了一下，从函数式变成了单纯的对象形式，此时，我们再来执行一下代码：
?结果可期吖，就是报错，直接看箭头所指，很明显就是data出错了；
而对于vue单文件组件也是如此，在此简单提一下：
<script>
export default {
// 正确
data(){
return {
msg:'Hello Vue!'
}
}
// 错误
data:{
msg:'Hello Vue!'
}
}
</script>上段代码中，data也是一个函数，而我们定义的属性，则是通过return返回对象的方式来定义的。
好，通过对问题的简要分析，我们再来深究它到底是为什么如此？
2. 从源码的角度看问题
源码位置：src\core\instance\state.js ----initDate()函数
我们来简单了解一下：
?以上截图就是源码了，我们来简单分析下：
其实，上述截图代码就是一个检测代码，在vue组件中，它规定data必须是一个函数，如果不是函数，它就过不了检测，就会报错；
那么vue这样做的原因在哪里呢？
其实，如果data它不是一个函数，那么当页面中有多个组件时，data中的数据就会出现数据污染的情况，类似于所有组件共用一个data的现象；
那么，为什么根实例中的data不需要如此呢？
这也很好理解，实例对象的创建，本就是开辟新内存的操作，也就是说它们各自独立，互不干扰，它们中的data，也是各自独有的，互不干扰，也就不会出现共用一个data的情况，也不会出现数据污染。
3. 结论
1. Vue组件可能存在多个实例，如果使用对象形式定义data，则会导致它们共用一个data对象，那么状态变更将会影响所有组件实例，这是vue所不允许的；
2. 采用函数形式定义，在initData时将其作为工厂函数返回全新data对象，有效规避了多实例之间状态污染问题；
3. 在vue根实例创建过程中则不存在这种请求，也是因为根实例只能有一个，不需要担心这种情况。