vue中data函数中return 理解

vue中data函数中return 理解理解了吗？弄明白了吗？用你自己的话解释？

YF_Q

于 2020-05-18 23:46:46 发布

6453
收藏 21
分类专栏：笔记文章标签： vue
版权

笔记
专栏收录该内容
11 篇文章1 订阅
订阅专栏
【个人笔记】vue中data函数中为何return 相关理解
常见小项目、示例中的data写法为：

data:{ a: 10}
1
这种写法data对象是引用类型

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

data(){return {a:10}}
1
函数写法，每次返回新对象

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

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

具体原因
vue文件中的对象会作为选项(option)构建组件实例。当存在多个相同组件被引用，其实都是基于同一份对象进行构建，如果data是对象，则这些组件data都会指向同一个对象，因为会互相影响。使用函数就可以在构建时调用函数生成对象，此时组件之间的data互不干扰。
————————————————
版权声明：本文为CSDN博主「YF_Q」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/YFirst_/article/details/106204366