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本身設計無關。