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-devtools 打开源码位置实现过程

    vue-devtools 打开源码位置实现过程

    这篇文章主要为大家介绍了vue-devtools 打开源码位置实现过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 使用vue-antd动态切换主题

    使用vue-antd动态切换主题

    这篇文章主要介绍了使用vue-antd动态切换主题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue如何封装Axios的get、post请求

    vue如何封装Axios的get、post请求

    这篇文章主要介绍了vue如何封装Axios的get、post请求,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • VuePress 快速踩坑小结

    VuePress 快速踩坑小结

    VuePress 可以让您非常方便的在 Markdown 文档中编写 Vue 代码,这篇文章主要介绍了VuePress 快速踩坑小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • 浅谈实现在线预览PDF的几种解决办法

    浅谈实现在线预览PDF的几种解决办法

    这篇文章主要介绍了浅谈实现在线预览PDF的几种解决办法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • VUE组件中的 Drawer 抽屉实现代码

    VUE组件中的 Drawer 抽屉实现代码

    这篇文章主要介绍了VUE组件 之 Drawer 抽屉 ,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • 浅谈VUE uni-app 模板语法

    浅谈VUE uni-app 模板语法

    这篇文章主要介绍了uni-app 的模板语法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10
  • vue中使用element日历组件的示例代码

    vue中使用element日历组件的示例代码

    这篇文章主要介绍了vue中如何使用element的日历组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-09-09
  • 详解在不使用ssr的情况下解决Vue单页面SEO问题

    详解在不使用ssr的情况下解决Vue单页面SEO问题

    这篇文章主要介绍了在不使用ssr的情况下解决Vue单页面SEO问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 解决Element ui导航栏选中背景色刷新消失的问题

    解决Element ui导航栏选中背景色刷新消失的问题

    这篇文章主要介绍了解决Element ui导航栏选中背景色刷新消失的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05

最新评论