vue中的data属性为什么必须是函数

1. JavaScript中的对象是引用类型的数据，当多个实例引用同一个对象时，只要一个实例对这个对象进行操作，其他实例中的数据也会发生变化。
2. 在Vue中，更多的是想要复用组件，那就需要每个组件都有自己的数据，这样组件之间才不会相互干扰
3. 组件的数据不能写成对象的形式，而是要写成函数的形式。数据以函数返回值的形式定义，这样当每次复用组件的时候，就会返回一个新的data，也就是说每个组件都有自己的私有数据空间，它们各自维护自己的数据，不会干扰其他组件的正常运行。
   例子：

function Person() {
  this.data =this.model
}
Person.prototype.model={
  message:'hello'
}
let p1 = new Person();
let p2 = new Person();
p1.data.message = 'china'
console.log(p1.data.message)//china
console.log(p2.data.message)//china

可以看到，p1和p2的 data 指向了同一个内存地址，message都变成了 ‘china’ 因此, data如果单纯的写成对象形式，会使得所有组件实例共用了一份data，造成一个变了全都会变的结果。
如果data是个函数的话，就不会出现以上情况，每一个调用data , data都会返回一个新的地址，就不会影响到其他实例调用data时，自己的数据受到影响。

当我们把data换成函数形式的时候：

function Person() {
  this.data =this.model()
}
Person.prototype.data=function(){
  return {message:'hello'}
}
let p1 = new Person();
let p2 = new Person();
p1.data.message = 'china'

console.log(p1.data.message)//china
console.log(p2.data.message)//hello