为什么Vue实例中的data是对象，而Vue组件中的data必须是函数返回值？

        其实原因很简单，主要是考虑到组件复用时的情况。vue实例一般情况不会复用，所以vue实例data可以是一个对象。但是设计组件的目的就是为了复用，所以组件内的data不能是对象。那么，data是对象还是函数返回值有什么不一样呢？具体原因如下：

        一个事实是，不管是vue实例对象还是vue组件，在重复使用时，都会监听同一个data属性的数据。

        如果vue实例对象/vue组件复用时，data是一个对象，data属性的数据在不同的页面中会始终同步，那么造成的后果就是不同组件页面的数据会相互影响。比如说 你在首页使用组件时更改了data内数据，其他复用该组件的页面也会同步更新，这在正常情况下是我们不希望看到的，当然vue官方也不希望我们这么做（语法报错）。

        那如何解决这个问题呢？很简单，利用函数（函数每次调用都会重新加载/重新生成对象）返回对象的方式即可解决。原理如下：

        当data是函数返回对象时，利用的就是在每次调用data函数时都会重新生成一个新的对象。这样，当组件重复使用的时候，每次调用data的函数时都会是不同的对象，既然是不同的对象，那么不同对象内的数据是相互不影响的，从而避免了数据“污染”。如果data直接是一个对象，那么组件复用时，它们使用的始终是同一个对象，所以对象内的数据是一样的。代码案例如下：

案例一（组件复用时使用的始终是同一个对象obj）：

const obj1 = {msg: 'hello vuejs'}

new Vue({

        el: '#app',
        data: obj1

})

案例二（组件复用时每次调用data函数，会重新创建一个新的对象obj2）：

const obj2 = {msg: 'hello vuejs'}

new Vue({

        el:'#app',

        data(){

                return obj2

        }

})