[JavaScript知识库]面试官：vue中data为什么必须是个函数

Vue 中的 data 必须是个函数，因为当data是函数时，组件实例化的时候这个函数将会被调用，返回一个对象，计算机会给这个对象分配一个内存地址，实例化几次就分配几个内存地址，他们的地址都不一样，所以每个组件中的数据不会相互干扰，改变其中一个组件的状态，其它组件不变。

简单来说，就是为了保证组件的独立性和可复用性，如果data是个函数的话，每复用一次组件就会返回新的data，类似于给每个组件实例创建一个私有的数据空间，保护各自的数据互不影响。

先举个例子吧，如果data单纯是个对象，看它的两个实例对象调用了他，里面的数据会不会发生变化：

function foo() {
            this.data = this.data
        }
        foo.prototype.data = {
            name: '张三',
            age: 18
        }
        let f1 = new foo()
        let f2 = new foo()
        f1.data.name = '李四'
        console.log(f1.data.name);//李四
        console.log(f2.data.name);//李四

可以看到，f1和f2的 data 指向了同一个内存地址，name都变成了 '李四' ，

因此, data 如果单纯的写成对象形式，会使得所有组件实例共用了一份data，造成一个变了全都会变的结果。

如果data是个函数的话，就不会出现这种情况，每一个调用data , data都会返回一个新的地址，就不会影响到其他实例调用data时，自己的数据受到影响。

function foo() {
            this.data = this.data()
        }
        foo.prototype.data = function () {
            return {
                name: '张三',
                age: 18
            }

        }
        let f1 = new foo()
        let f2 = new foo()
        f1.data.name = '李四'
        console.log(f1.data.name);//李四
        console.log(f2.data.name);//张三