Toggle navigation
集客麦麦@谢坤
首页
随笔
首页
>>
创作中心
>>
从两个例子解释为什么...
从两个例子解释为什么VUE的组件data要是一个函数而不是对象
Not Found
###将data设置为对象: ```javascript const SelfComponent = function() {}; SelfComponent.prototype.data = { a: 'aaa', b: 'bbb', } const component1 = new SelfComponent(); const component2 = new SelfComponent(); component1.data.a === component2.data.a; // true; component1.data.b = 'ccc'; component2.data.b // ccc ``` 可以看到data是作用原型上,因为原型值的共享特性,由此因为原型的改变导致所有由此新建出来的对象都被更改了 ###将data设置为函数: ```javascript const SelfComponent = function() { this.data = this.data(); }; SelfComponent.prototype.data = function() { return { a: 'aaa', b: 'bbb', } }; var a = new SelfComponent() var b = new SelfComponent() console.log(a.data) // Object { a: "aaa", b: "bbb" } a.data = {c:'ccc'} console.log(a.data) // Object { c: "ccc" } console.log(b.data) // Object { a: "aaa", b: "bbb" } ``` 以上可以看到,对象b并没有因为对象a的data改变而改变,这是因为每次新建一个SelfComponent对象时,都会从内存中新建一个对象从而避免了在多次引用SelfComponent时data共享一个对象