Vue组件中data为什么要写为函数式

为什么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一定要使用函数式写法