Vue中的data为什么要写成函数形式

vue中的data有两种形式的写法，对象形式和函数形式，如果只在一个页面中引入vue.js可以把它写成对象形式

<div id="app">
  
</div>
<script>
var app = new Vue({
 el: "#app",
 	data: {

   	},
});
</script>

但是如果使用了组件进行开发就必须把data写成函数形式，在脚手架中data也全部是写成函数形式的，如果写成对象形式会直接报错

<script>
export default {
  data(){
    return{

    }
  }
}
</script>

这是因为写成对象形式的话，在一个页面中多次使用一个组件会造成该组件数据的错乱，如果按照以下方式定义一个对象，在修改x1的a属性时会把x2的a属性也修改了，因为这两个变量的地址都指向了同一个对象

 let data = {
   a: 10,
   b: 20
 }
 let x1 = data
 let x2 = data

如果是通过函数调用的方式就不会存在这个问题，而且data还不能写成箭头函数的形式，因为写成箭头函数this就不再指向当前的vue实例了

function data(){
  return{
   a: 10,
   b: 20
  }
 }
 let x1 = data()
 let x2 = data()