面试题之vue组件中的data

在面试的过程中，vue的相关问题是稳的最多的，所以现在，我们说个比较常见，但是不是特别很好回答的面试题：vue组件中data为什么必须是一个函数
简单的说：

//为什么data函数里面要return一个对象
<script>
    export default {
        data() {
            return {  // 返回一个唯一的对象，不要和其他组件共用一个对象进行返回
                name: '王云飞',
                age: '20多岁'
            }
        }
    }
</script>

因为一个组件是可以共享的，但他们的data是私有的，所以每个组件都要return一个新的data对象，返回一个唯一的对象，不要和其他组件共用一个对象。

详细解读：
类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了;
javascipt只有函数构成作用域(注意理解作用域,只有函数的{}构成作用域,对象的{}以及 if(){}都不构成作用域)，data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立,不会相互影响。

<script>
    const myComponent = function () {};
    myComponent.prototype.data = {
        a: 1,
        b: 2
    }
 
    const component1 = new myComponent()
    const component2 = new myComponent()
 
    console.log(component1.data.a === component2.data.a)  // true
    component1.data.b = 5
    console.log(component2.data.b) // 5
</script>
// 如果两个实例同时引用一个对象,那么当你修改其中一个属性的时候,另外一个实例也会跟着改;

<script>
    const myComponent = function () {
        this.data = this.data()
    };
 
    myComponent.prototype.data = function () {
        return {
            a: 1,
            b: 2
        }
    }
 
    const component1 = new myComponent()
    const component2 = new myComponent()
     
    console.log(component1.data.a === component2.data.a)  // true
    component1.data.b = 5
    console.log(component2.data.b) // 2
</script>
// 这样么一个实例的data属性都是独立的,不会相互影响了.

所以，现在知道为什么vue组件的data必须是函数了吧。这都是因为js本身的特性带来的，跟vue本身设计无关。其实vue不应该把这个方法名取为data()，应该叫setData或其他更容易理解的方法名