为什么data要写成函数

Vue中每个组件都是一个类，使用组件时会创建组件实例

data如果写成对象，会是如下形式

class Component {
    constructor() {
        this.data = this.data;
    }
}
Component.prototype.data = {
    num: 111,
};

const c1 = new Component();
console.log(c1.data.num);		// 111

c1.data.num=666

const c2 = new Component();
console.log(c2.data.num)		// 666

可以看到修改了c1的属性值，c2中的属性值也改变了

data写成函数

class Component {
    constructor() {
        this.data = this.data();
    }
}
Component.prototype.data = function () {
    return {
        num: 111,
    };
};

const c1 = new Component();
console.log(c1.data.num);  // 111

c1.data.num = 666;

const c2 = new Component();
console.log(c2.data.num);	// 111

可以看到数据互不影响

因为函数每次的返回值都是一个新地址