Vue 组件中 data 为什么必须是函数

Z时代
2024-01-10
分类：综合

vue

原文地址

vue组件中的data必须是函数

类比引用数据类型

Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了;

javascipt只有函数构成作用域(注意理解作用域,只有函数的{}构成作用域,对象的{}以及 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,
　　}
};
var c1=new MyComponent();
var c2=new MyComponent();
c2.data.a=5;
console.log(c1.data);//{ a: 1, b: 2 }
console.log(c2.data);//{ a: 5, b: 2 }

这样么一个实例的data属性都是独立的,不会相互影响了.

所以，你现在知道为什么vue组件的data必须是函数了吧。这都是因为js本身的特性带来的，跟vue本身设计无关。