vue Mutation 必须是同步函数 为什么_vue的组件中为什么data必须是一个函数？

组件中为什么data必须是一个函数

如果不是函数

如果组件中的data不是一个函数，首先vue是会报错的，因为它内部规范组件中的data必须是个函数。

那为什么必须是个函数呢？大家接着看看
既然它要求返回一个对象，那我们定义一个对象再给他返回行不行呢？

而此时点击也有用功能也能实现
但是，当我们需要多次使用此组件时

我们可以发现，此时组件的数据是共享的，一个改变，其他也改变，很显然，我们开发组件就是希望使用时能自己的数据不和其他组件进行共享，这样很容易污染变量，造成数据紊乱。

正确做法

我们让data成为一个函数，且返回是一个未定义的对象，这样就不会和上面这样返回是一个在全局作用域定义的对象，造成数据共享。
因为此时我们每次返回的对象的地址都是不一样的，所以在组件对值修改时，会去寻找对应该组件data返回对象的地址，这样就能很好地控制组件数据独立。

函数解析

我们在js代码里同样做一些操作
用read函数返回同一个obj对象，然后用三个常量去接收同一个函数返回的对象
然后我们把obj2中的num值改变
这里我们做一个假设
如果其他两个对象 obj1 obj3 以及 obj 对象中的num 都改变了
说明 obj1 obj2 obj3 它们引用的都是obj对象的地址 所以每次改变都是改obj中的值然后其它引用它地址的对象也会发生值改变。
如果 其他对象中都num 依然是10 只有 obj2 的num是99
说明obj1 obj2 obj3 它们是各自创建了新对象，新对象也就意味着其地址不一样，所以其中一个改变不会影响到另外对象的值。

很明显 这里的obj1 obj2 obj3 引用的是obj的地址 它们的数据都是绑在obj上的
一个变则全变

我们换种写法
如果是这样写，那又会是什么结果呢？

我们可以发现 只有obj2的值发生了变化
说明 obj1 obj2 obj3它们的地址指向是不同的，都是各自新生成了一个对象再返回出去的。

小结下：之前那样的做法是让read返回一个具体的对象，这样再得到这个返回值的对象始终是指向定义的具体对象。
而现在这样的做法让其每次调用都返回一个基于该次的一个新对象，这样的每次基于的对象地址不同，从而它们的数据是独立的，互不影响的。

总结

因为如果data是一个对象则会造成数据共享，在多次使用该组件时，改变其中一个组件的值会影响全部该组件的值。而如果是通过函数的形式返回出一个对象的话，在每次使用该组件时返回出的对象的地址指向都是不一样的，这样就能让各个组件的数据独立。

————————————————

版权声明：本文为CSDN博主「Might°」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：

vue的组件中为什么data必须是一个函数？_kzj0916的博客-CSDN博客_data必须是一个函数?​blog.csdn.net