為什呢vue元件中的data必須是函式?
阿新 • • 發佈:2019-01-12
類比引用資料型別
Object是引用資料型別,如果不用function 返回,每個元件的data 都是記憶體的同一個地址,一個數據改變了其他也改變了;
關於JS中的資料型別:
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,
}
};
這樣麼一個例項的data屬性都是獨立的,不會相互影響了.
所以,vue元件的data必須是函式。這都是因為js本身的特性帶來的,跟vue本身設計無關