![e5548d430ea8260ae8ee88e42c305072.png](https://i-blog.csdnimg.cn/blog_migrate/b18bc9f0360ab5d19cf17ecb543fbe8d.jpeg)
今天我就拿我的这篇文章来做个开头吧。
看到这个问题可能很多人都并可以注意过这个问题,问什么在脚手架中的.vue文件中data不能用对象来表达,而是必须使用函数的形式来表达呢?大家可能也不知道为什么这么设计?
实际上这是很有学问的,当初框架设计的时候,都是想了很多可能会出现的问题的。
首先我们做一个类比,如下代码:
![22649aa54f49521cda562cb423f8830e.png](https://i-blog.csdnimg.cn/blog_migrate/b528c60991d3575c3266766e48da757b.png)
对三个不同的变量obj1,obj2,obj3进行赋值,并且都是调用方法abc(),也就是说创建了三个不一样的实例,所以返回的此方法返回的值,就被赋值给了不同的地址。 因此这三个变量的内存地址是不同的,此时改变其中一个变量的值,其他两个变量的值是不会跟随发生改变的。
我们此时在做一个类比,如下图:
![786cc60fff51b25f82154c49ada0b16c.png](https://i-blog.csdnimg.cn/blog_migrate/493cde13df309af545fccac6fd8737cd.jpeg)
我们首先声明一个常量obj(假设被储存在内存地址0x100),再写一个函数abc()其返回值为刚刚定义的常量obj(返回的值指向地址0x100)。 所以我们对三个变量obj1,obj2,obj3进行赋值abc(),都是指向0x100的地址,此时更改其中一个变量的值,我们就会发现其他两个变量的值也随之改变。如下图解释:
![165f1f775a419d5011d9b58bf58c2ffe.png](https://i-blog.csdnimg.cn/blog_migrate/b50348053c8b8f92860283b05c397e3a.jpeg)
我们回过头来看当前组件
当前组件为,如果我们在实例中多次使用当前组件的话如下:
![1dbaedb04d1e4f146961ace4d1b8c8e8.png](https://i-blog.csdnimg.cn/blog_migrate/6f904d1a187bf16709c8ce0eeaf507ba.jpeg)
如果我们把组件里面的data改成一个对象的话,如下图:
![58ee9aa49f086e704fcab0cdd7e5c15c.png](https://i-blog.csdnimg.cn/blog_migrate/70ec688c39a5cea83d90db3413d2e206.jpeg)
data此时是一个对象,里面存放着很多数据,都是指向同一个地址。 此时如果重复的使用相同的当前组件,每一个组件用的值都是从这个data:{}对象中取得(也就是说都是从同一个地址中取值),就对组件之间造成了相互干扰。 同理,我们就可以知道组件中的data使用函数然后返回一个对象的话,就不会存在这个问题了,因为在创建不同组件的时候,会return出不同地址的对象,并不存在干扰组件之间的数据绑定之类的问题