Vue——為什麼元件data是函式
阿新 • • 發佈:2020-12-09
問題描述
為什麼Vue元件中的data是函式?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <conter></conter> </div> </body> <script src="node_modules/vue/dist/vue.js"></script> <script> Vue.component("conter",{ template:"<button type=\"button\" @click=\"num++\">點我{{num}}</button>", data:function () { return{ num: 1 } } }); const app=new Vue({ el: "#app" }); </script> </html>
根本原因
Object是引用資料型別,如果不用function返回,每個元件的data都是記憶體的同一個地址,一個數據改變了其他也改變了;元件是可複用的,一個數據改變其他的也改變這很明顯不是我們想要看到的結果,所以元件的data返回值必須是函式。當然瞭如果你想多個元件共享同一份data,也可以使用物件
JavaScript只有函式構成作用域(注意理解作用域,只有函式{}構成作用域,物件的{}以及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 } };