为什么vue中data必须是一个函数 梦里梦外; 2022-02-27 16:34 237阅读 0赞 本文从JavaScript原型链角度来解释为什么vue中的data必须是一个函数 # **VUE组件中的data必须是函数** # 类别引用数据类型 Object是引用数据类型，如果不用function返回，每个组件的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 } }; 这样么一个实例的data属性都是独立的，不会相互影响了。 所以，你现在知道为什么vue组件的data必须是函数了吧。这都是因为js本身的特性带来的，跟vue本身设计无关。其实vue不应该把这个方法取名为data（），应该叫setData或其他更容易理解的方法名。
还没有评论，来说两句吧...