vue对象的深度克隆方式
更新时间：2022年09月08日 09:07:40 作者：久违°
这篇文章主要介绍了vue对象的深度克隆方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue对象的深度克隆
方法1
通过js序列化，将js转换成字符串，然后再将字符串转换成js对象
var olbObj = {a:1};
var str = JSON.stringify(obj); //序列化对象
var newobj = JSON.parse(str); //还原
//相当于
var newObj = JSON.parse(JSON.stringify(olbObj ))方法2
ES6语法对象展开运算符进行对象的展开赋值
var a = {a:0}
var b = {...a}方法3
进行对象的遍历复制，对 对象的每一条属性进行复制，这样就能进行对象的深度克隆
function newobj(obj) {
var str, newobj = obj.constructor === Array ? [] : {};
//constructor 属性返回对创建此对象的数组函数的引用。创建相同类型的空数据
if (typeof obj !== 'object') {
return;
} else {
for (var i in obj) {
if (typeof obj[i] === 'object'){//判断对象的这条属性是否为对象
newobj[i] = newObj(obj[i]);//若是对象进行嵌套调用
}else{
newobj[i] = obj[i];
}
}
}
return newobj;//返回深度克隆后的对象
}vue克隆对象时遇到的问题
我们知道 当我们需要深克隆一个对象 或者数组时 改变这个得到的数据，原数据保持不变 比较简单的用到的函数基本都是
let b = JSON.parse(JSON.stringify(a))
但是假如我们克隆一个vue响应式对象时 发现用这个方法没啥用
所以需要一个工具函数老深克隆
//深克隆
export const deepClone = (source) => {
var sourceCopy = source instanceof Array ? [] : {}
for (var item in source) {
sourceCopy[item] = typeof source[item] === 'object' ? deepClone(source[item]) : source[item]
}
return sourceCopy
}
let b = deepClone (a)这样就得到响应式的啦
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue-cli脚手架-bulid下的配置文件,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流程,同时,还强调了浏览器兼容性、HTTPS环境、权限问题和性能优化的重要性,感兴趣的朋友一起看看吧2025-03-03
这篇文章主要为大家详细介绍了vue.js响应式原理解析与实现，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-08-08
这篇文章主要为大家详细介绍了Vue实现省市区三级联动el-select组件的方法，文中的示例代码讲解详细，具有一定的借鉴价值，需要的的可以参考一下2023-02-02
本文主要介绍了vue elementUI实现自定义正则规则验证，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
本文主要介绍了el-form中的rules未生效的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要为大家详细介绍了Vue仿百度搜索功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要为大家详细介绍了vue循环数组改变点击文字的颜色，非常实用的切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
本篇文章主要介绍了Vue 换肤的示例实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
Vue Property Decorator提供了一些装饰器，包括@Prop、@Watch、@Emit、@Inject、@Provide、@Model等等，本文主要来和大家讲讲它们的使用方法，需要的可以参考一下2023-07-07
最新评论