vue data为什么是函数_Vue 中data里面的数据为什么要return出去

本文来自我的小伙伴小帅，从JS基础出发一起学习JS，全网首发

在看vue的时候，看到data时就会有一个疑问，为什么要用return呢？经过查看vue相关文档，发现数据如果不是return出去的话会造成数据污染，此时数据是处于全局可见的状态，下面来看一组例子

const obj = {    name:'小帅',    age:'22'}const obj1 = obj;const obj2 = obj;obj1.name = '小小帅'console.log(obj1,obj2)

打印结果如下:

这里修改obj1 同样 obj2 和obj的值都会修改，类似于数据被全局污染了，我本来只想修改obj1，但是obj2和ob1j的值都被修改了，(当然这里只是随便举个例子，其实这是进行了对象的浅拷贝，这里用这个举例显得更清晰一点)

下面看下 return 的方式

const data = function(){    return {        name:'小帅',        age:'22'    }}const data1 = data();const data2 = data();data1.name = '小小帅'console.log(data1,data2)

打印结果如下:

把对象用函数包裹起来 retrun 出去以后为啥就能实现我们想要的效果，因为在js中使用函数包裹起来数据的话，他是属于局部变量，不会像全局变量一样容易被污染，当data是一个函数的时候，他的每一个组件都是一个单独的作用域被包裹起来，相互独立，互不影响

通过上述总结起来

1.不使用retrun包裹数据会使得数据全局化，会造成变量污染。

2.在vue中使用retrun包裹的数据中的变量只会在当前的组件内有效，不会影响到其他的组件中