问题描述
为什么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 } };