Vue 組件中 data 爲何必須是函數

原文地址

---

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自己設計無關。

---

返回目錄