vue中data属性为什么不是一个对象而是一个函数？

一、实例和组件定义data的区别

vue实例的时候定义data属性既可以是一个对象，也可以是一个函数

const app = new Vue({
    el:"#app",
    // 对象格式
    data:{
        foo:"foo"
    },
    // 函数格式
    data(){
        return {
             foo:"foo"
        }
    }
})

组件中定义data属性，只能是一个函数

Vue.component('component1',{
    template:`<div>组件</div>`,
   data(){
        return {
             foo:"foo"
        }
    }
})

二、组件data定义函数与对象的区别
（data属性为什么不是一个对象而是一个函数）

说法1

因为组件是用来复用的，且JS对象是引用关系，如果组件中的data是对象，那么作用域没有隔离
组件中的data值会相互影响；如果组件中data是函数，那么每个实例可以维护一份被返回对象
的独立拷贝，组件实例之间的data值不会相互影响。

vue实例不被复用，因此不存在引用对象的问题。

---

说法2

因为组件可能被用来创建多个实例，如果data是一个对象，修改其中一个实例的数据其他实例的数据也会跟着改变；
Data如果是一个函数，每一次创建实例之后返回的数据内存地址不同，改变其中一个数据，不会影响其他的数据。