vue对象复制方式(深拷贝,多层对象拷贝方式在后面)
vue对象复制
使用:es6中的“对象扩展运算符 ”,如下
// 对象深拷贝
obejctCopy() {
// 源对象小李
const source = { name: '小李', age: 18, gender: '男', school: '清华大学' }
// 拷贝小李
const copy1 = { ...source }
// 拷贝小李,并修改名字为小张
const copy2 = { ...source, name: '小张' }
// 修改源对象
source.age = 19
// 查看结果
console.log(source)
console.log(copy1)
console.log(copy2)
}结果:可见拷贝出来的对象,与源对象无关,深拷贝完成

更新
经网友指出,当对象中还包含对象时,则里层对象还是浅拷贝,验证代码
// 源对象小李
// const source = { name: '小李', age: 18, gender: '男', school: '清华大学' }
const source = { name: '小李', age: 18, gender: '男', school: '清华大学', more: { a: "test", b: 2, c: {} } }
// 拷贝小李
const copy1 = { ...source }
console.log(source === copy1) // false
console.log(source.more === copy1.more) // true若要里层拷贝则需要再次使用...,如下
// 源对象小李
// const source = { name: '小李', age: 18, gender: '男', school: '清华大学' }
const source = { name: '小李', age: 18, gender: '男', school: '清华大学', more: { a: "test", b: 2, c: {} } }
// 拷贝小李
const copy1 = { ...source, more: { ...source.more } }
console.log(source === copy1) // false
console.log(source.more === copy1.more) // false我的理解
==比较对象的时候还是比较的引用地址是不是同一个。在多层拷贝中,虽然“对more的引用”这个操作被复制了,但是引用指向的“more对象地址”还是同一个,内存中实际上只有一个“more”。因此要再次复制more才可以
vue对象复制的坑--对象深度拷贝
错误描述
使用vue store 存储的复杂对象,在其它文件中将其赋值给其他变量后,被赋值对象修改后,store中存储的对象也被修改了。。。
解决办法
如:depttreedata 为存储在store->getters中的非简单对象,将其拷贝给dept02data 对象可以写作:
let dept02data = JSON.parse(JSON.stringify(this.$store.getters.depttreedata));
之后引用dept02data 则不会影响原对象。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
lottie实现vue自定义loading指令及常用指令封装详解
这篇文章主要为大家介绍了lottie实现vue自定义loading指令及常用指令封装,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-09-09
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
这篇文章主要介绍了使用Vue-scroller页面input框不能触发滑动的问题,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-08-08
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来。下面通过本文给大家介绍Vue开发中常用的三种传值方式父传子、子传父、非父子组件传值,需要的朋友参考下吧2018-08-08
利用vuex-persistedstate将vuex本地存储实现
这篇文章主要介绍了利用vuex-persistedstate将vuex本地存储的实现,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-04-04


最新评论