一、 VUE组件中的data必须是函数
- Object是引用数据类型,如果不用function返回,每个组件的data都是内存的同一个地址,一个数据改变了其他也改变了;
- 在JavaScript中,只有函数构成作用域(注意理解作用域,只有函数{}构成作用域,对象的{}以及if(){}都不构成作用域),data是一个函数时,每个组件实例都有自己的作用域,每个实例相互独立,不会相互影响。 这是因为js本身的特性带来的,跟vue本身设计无关。
例如:
const MyComponent = function() {};
MyComponent.prototype.data = {
a: 1,
b: 2
}
const component1 = new MyComponent();
const component2 = new MyComponent();
component1.data.a === component2.data.a; // true
component1.data.b = 5;
component2.data.b //5
当两个实例同时引用一个对象,那么当其中一个属性被修改时,另外一个实例也会跟着改变。两个实例应该有自己各自的域才对,需要通过下面的方法进行处理。
const MyComponent = function() {
this.data = this.data();
};
MyComponent.prototype.data = function() {
return {
a:1,
b:2
}
};