网站首页 > 精选文章 正文
本文来自我的小伙伴小帅,从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包裹的数据中的变量只会在当前的组件内有效,不会影响到其他的组件中
猜你喜欢
- 2025-06-13 前端必看!7 个 Vue3 性能优化实战技巧,让页面飞起来
- 2025-06-13 前端也能玩转截图?uni-app + Vue3 实现页面快照功能
- 2025-06-13 Vue2 升级 Vue3 一文通关(vue-cli2.0升级3.0)
- 2025-06-13 Vue2的16种传参通信方式(vue有几种传参方式)
- 2025-06-13 面试官:聊聊你知道的Vue与React的区别
- 2025-06-13 vue3.0总结之ref与reactive(vue ref reactive)
- 2025-06-13 90% 的前端工程师都不知道的 Vue3 实战神操作,看完直呼后悔没早学
- 2025-06-13 vue3 组件初始化流程(vue组件初始化顺序)
- 2025-06-13 从 React 过渡到 Vue 3:开发者的实践指南
- 2025-06-13 vue重定向(vue重定向后403报错)
- 最近发表
-
- Vue基础入门,第15节 一键页面换新衣,动态修改样式的3种方法
- uniapp Vue3.x组件库uview-vue3(uniapp用什么组件库)
- Vue3 样式绑定: 内联样式与Class属性的数组语法
- Vue2的样式(class和style)绑定(vue样式scoped)
- 前端开发,在项目中常用的css样式整理
- 前端必看!7 个 Vue3 性能优化实战技巧,让页面飞起来
- 前端也能玩转截图?uni-app + Vue3 实现页面快照功能
- Vue2 升级 Vue3 一文通关(vue-cli2.0升级3.0)
- Vue2的16种传参通信方式(vue有几种传参方式)
- 面试官:聊聊你知道的Vue与React的区别
- 标签列表
-
- 向日葵无法连接服务器 (32)
- git.exe (33)
- vscode更新 (34)
- dev c (33)
- git ignore命令 (32)
- gitlab提交代码步骤 (37)
- java update (36)
- vue debug (34)
- vue blur (32)
- vscode导入vue项目 (33)
- vue chart (32)
- vue cms (32)
- 大雅数据库 (34)
- 技术迭代 (37)
- 同一局域网 (33)
- github拒绝连接 (33)
- vscode php插件 (32)
- vue注释快捷键 (32)
- linux ssr (33)
- 微端服务器 (35)
- 导航猫 (32)
- 获取当前时间年月日 (33)
- stp软件 (33)
- http下载文件 (33)
- linux bt下载 (33)