为什么Vue组件中的data要写为函数式
首先,来看一下对象式
data:{
a:1,
b:2
}
如果我想要用data,比如:
const x1=data;
const x2=data;
x1.a=66;
//那么此时,如果我想要输出x2.a,输出结果也会为66
//因为什么,因为data中的数据改变了,引用它的变量也会随之改变
//这就导致当我们想要对一些对象式数据进行复用时,会出现错误
但是,如果我们使用函数式,如下:
function data(){
return{
a:1,
b:2
}
}
const x1=data();
const x2=data();
x1.a=66;
//那么此时,如果我想输出x2.a,则结果还是1
//因为返回值导致这两个是独立的,相当于调用两次data函数
//每次调用完毕后都会返回一个全新的data值赋给变量
//也就是x1和x2都包含a和b两个变量,但是x1和x2是独立的
//不像上边的对象式,x1和x2相当于指针,同时指向data对象
//所以这就不用担心在使用时会出现错误
这就是为什么组件中的data一定要使用函数式写法