1. 程式人生 > >為什呢vue元件中的data必須是函式?

為什呢vue元件中的data必須是函式?

類比引用資料型別
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本身設計無關