vue組件中的data必須是函數
類比引用數據類型
Object是引用數據類型,如果不用function 返回,每個組件的data 都是內存的同一個地址,一個數據改變了其他也改變了;
javascipt只有函數構成作用域(注意理解作用域,只有函數的{}構成作用域,對象的{}以及 if(){}都不構成作用域)，data是一個函數時，每個組件實例都有自己的作用域，每個實例相互獨立,不會相互影響
舉個🌰
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,
}
};
var c1=new MyComponent();
var c2=new MyComponent();
c2.data.a=5;
console.log(c1.data);//{ a: 1, b: 2 }
console.log(c2.data);//{ a: 5, b: 2 }
這樣么一個實例的data屬性都是獨立的,不會相互影響了.
所以，你現在知道為什么vue組件的data必須是函數了吧。這都是因為js本身的特性帶來的，跟vue本身設計無關。