vue中data函数中return 理解

【个人笔记】vue中data函数中为何return 相关理解

常见小项目、示例中的data写法为：

​	data:{ a: 10}

这种写法data对象是引用类型

大项目中通常要return新对象：

data(){return {a:10}}

函数写法，每次返回新对象

为什么要return 呢？

因为如果vue项目过大，创建多个相同组件时，未用 return 创建新对象的 data 都将指向同一个地址，造成数据污染，

通过函数写法return一个新对象，对象地址不同，数据之间相互独立，避免数据污染。

具体原因

​ vue文件中的对象会作为选项(option)构建组件实例。当存在多个相同组件被引用，其实都是基于同一份对象进行构建，如果data是对象，则这些组件data都会指向同一个对象，因为会互相影响。使用函数就可以在构建时调用函数生成对象，此时组件之间的data互不干扰。