为什么Vue实例中的data是一个对象，但是组件实例中的data却必须是一个方法呢

为什么Vue实例中的data是一个对象，但是组件实例中的data却必须是一个方法呢

先看一下vue实例

    let vm = new Vue({
        el:"#box",
        data:{
            num:0
        },
        methods:{

        },
        computed:{

        },
        filters:{

        },
        watch:{

        },
        components:{
            temp:{
                template:"#temp",
                data(){
                    return {
                        num : 2
                    }
                }
            }
        }
    })

Vue的官方文档中也有说组件中的data必须使用函数否则会报错，这是为什么呢？

这就要追溯到我们的Jvascript的对象了，众所周知Javascript的对象属于引用数据类型，如果将一个对象赋值给另一个对象他并不是将该对象的值赋给新变量，而是在内存中将起初申明的对象去指向这个新对象

let obj = {
    name: "小明",
    age:19
}
let obj1 = obj 
obj.name = "小红"
// 此时   obj1.name == "小红"
// 并且   obj.name == "小红"

这种情况下如果修改obj1中的属性，obj的数据也会发生变化

为什么要提到这个呢 我们就要理解一下组件 其实就类似原生js的一个构造函数

我们去调用的组件就是相当于原生js我们去实例化的对象加入我们申明一个构造函数 person并改变其中的值

    function Person(name,age){
        this.name = nmae;
        this.age = age ;
        this.race = "汉族"
    }
    let ming = new Person("xiaoming",19)
    let hong = new Person("xiaohong",20)
    console.log(ming)
    console.log(hong)
    // 此时如果我们把小明的名族改了
    ming.race="维吾尔族"
    console.log(ming)
    console.log(hong)
    // 我们再去查看一下会发现，小明小红都变成了维吾尔族

所以 如果我们在实例化组件以后 去修改任何组件的一个变量，其他的变量都会变成一样的，之所以使用函数是因为Jvascript中，if，for，都是没有局部作用域的概念的，只有函数有函数的封闭作用域，这也就是为什么Vue的设计者为什么在组件中华使用了一个data却却再次return了一个对象