简单理解Vue的data为啥只能是函数

前言

在学习vue的时候vue2只有在组件中严格要求data必须是一个函数，而在普通vue实例中，data可以是一个对象，但是在vue3出现后data必须一个函数，当时看着官方文档说的是好像是对象的引用问题，但是内部原理却不是很了解，今天通过一个简单的例子来说明为啥data必须是一个函数

1.Vue3中的data

const { createApp } = Vue
const app = {data: {a: 1},template: `<h1>{
  {a}}</h1>`
}
createApp(app).mount('#app') 

2.vue中的data

var app = new Vue({el: '#app',data: { a: 'hello world' }
}) 

这种写法是可以的，前面提过普通实例data可以是对象，但是在组件中必须是函数， **那么在vue2中难道普通实例就没有缺陷嘛？**答案：是有缺陷的， 比如这样

<div id="app1">{
  { message }}</div&