JavaScript数据存储和深浅拷贝实际运用
2024-09-02 19:28:42
JavaScript分两种数据类型。
1.简单数据类型有:number, string, boolean, undefined和null
当声明一个简单数据类型的变量时,在内存中会把数据存在栈里。
2.复杂数据类型。Object
var student = new Person
当我创建一个实例的时候,会在内存中开辟一个空间,对象存放在堆里,student是一个内存地址,指向堆中的对象。
深拷贝和浅拷贝就是在存储复杂数据时产生的问题。
浅拷贝就是我只获取到了这个对象的内存地址,可以指向原对象。当我修改时,原对象也会改变。
深拷贝就是重新创建了一个空间,对象放在堆里,我修改原对象不影响我新创建的对象。
实际上在开发过程中,遇到了一个问题,就是有关于深浅拷贝的。
首先介绍一下开发背景。是一个后台管理项目。表格数据后有编辑页面,编辑页面与添加页面服用,利用了vue的父子传值,当我是添加时,父组件给子组件是一个空对象,当我是编辑时,传入当前表格一行的数据以对象的形式传给子组件。
子组件的方法。
// 打开弹窗
dialogOpen() {
console.log('打开页面',this.expert)
this.$refs.form.resetFields();
if (this.expert.id) {
// 进入修改
this.form = this.expert
} else {
this.form = {};
}
},
通过expert.id 判断是否是添加页面,如果是,把expert里的内容传给当前表单,如果不是,表单内容清空。
props: {
expert: Object,
value: Boolean
},
该组件接收的值
出现的问题就是:当我打开编辑弹窗后,并没有做任何修改关闭页面,列表页的当前列表数据变成空。
出现原因:当我进入编辑页面时,this.form = this.expert 是浅拷贝,复制了对象的地址。当我点击添加时,在父组件中给this.expert ={},此时,this.form就是空的,再点击编辑,form也是空的了。
解决后的代码
// 打开弹窗
dialogOpen() {
console.log('打开页面',this.expert)
this.$refs.form.resetFields();
if (this.expert.id) {
// 进入修改
this.form = {...this.expert}// 深拷贝
} else {
this.form = {};
}
},
最新文章
- javascript设计模式-策略模式
- wordpress钩子和钩子函数
- 关于YARN的HA
- C语言的本质(5)——类型转换的本质与处理
- [转]Whirlwind Tour of ARM Assembly
- 关于js的那些事儿
- redux核心思路和代码解析
- chrome官方完整安装包
- Python开发爬虫之BeautifulSoup解析网页篇:爬取安居客网站上北京二手房数据
- python3下获取全局坐标
- 【开源GPS追踪】 之 服务器硬伤
- 通过windows远程桌面连接CentOS系统
- input输入框的光标定位的问题
- 在Ubuntu的系统中怎样将应用程序加入到開始菜单中
- Android Error: This attribute must be localized.
- ecplise导入工程出现乱码的解决方案
- 前端工程化 - Yeoman
- T31P电子秤数据读取
- MySQL复制报错(Slave failed to initialize relay log info structure from the repository)
- C#基础 base与this关键字