为什么vue中data必须是⼀个函数
本篇⽂章从javascript原型链来解释为什么vue中data必须是⼀个函数
vue组件中的data必须是函数
类⽐引⽤数据类型
Object是引⽤数据类型，如果不⽤function 返回，每个组件的data 都是内存的同⼀个地址,⼀个数据改变了其他也改变了;
javascipt只有函数构成作⽤域(注意理解作⽤域，只有函数的{}构成作⽤域，对象的{}以及if(){}都不构成作⽤域)，data是⼀个函数时，每个组件实例都有⾃⼰的作⽤域，每个实例相互独⽴，不会相互影响
举个
const MyComponent = function() {};
MyComponent.prototype.data = {
a: 1,
函数prototypeb: 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或其他更容易理解的⽅法名。
作者：牧码的星星
链接：www.jianshu/p/839cbef3be41
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，⾮商业转载请注明出处。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。