企业项目管理、ORK、研发管理与敏捷开发工具平台

网站首页 > 精选文章 正文

Vue 中data里面的数据为什么要return出去

wudianyun 2025-06-13 17:21:09 精选文章 2 ℃

本文来自我的小伙伴小帅,从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包裹的数据中的变量只会在当前的组件内有效,不会影响到其他的组件中

Tags:

最近发表
标签列表