vue 封装对象深拷贝方法

vue 封装对象深拷贝方法

  1. 在 src/ utils文件夹下面新建index.js
javascript 复制代码
// index.js

// 深拷贝对象
export function deepClone(obj) {
    const _toString = Object.prototype.toString
  
    // null, undefined, non-object, function
    if (!obj || typeof obj !== 'object') {
      return obj
    }
  
    // DOM Node
    if (obj.nodeType && 'cloneNode' in obj) {
      return obj.cloneNode(true)
    }
  
    // Date
    if (_toString.call(obj) === '[object Date]') {
      return new Date(obj.getTime())
    }
  
    // RegExp
    if (_toString.call(obj) === '[object RegExp]') {
      const flags = []
      if (obj.global) { flags.push('g') }
      if (obj.multiline) { flags.push('m') }
      if (obj.ignoreCase) { flags.push('i') }
  
      return new RegExp(obj.source, flags.join(''))
    }
  
    const result = Array.isArray(obj) ? [] : obj.constructor ? new obj.constructor() : {}
  
    for (const key in obj) {
      result[key] = deepClone(obj[key])
    }
  
    return result
  }
  1. 使用
javascript 复制代码
// 简单使用

<script>
import { deepClone } from '@/utils/index'
export default {
  name: "HomeView",
  data() {
    return {
      obj: {
        a: 1,
        b: 2,
        c: 3,
      },
    };
  },
  mounted(){
    let newObj = deepClone(this.obj)   // 方法使用
    // 方法验证
    console.log(newObj)  // {a: 1, b: 2, c: 3}
    newObj.c = 4
    console.log(newObj) // {a: 1, b: 2, c: 4}
    console.log(this.obj)  // {a: 1, b: 2, c: 3}
  }
};
</script>
  1. 搞定 复制可直接用!
相关推荐
理想不理想v3 分钟前
vue经典前端面试题
前端·javascript·vue.js
不收藏找不到我4 分钟前
浏览器交互事件汇总
前端·交互
小阮的学习笔记17 分钟前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜17 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=17 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
杨荧20 分钟前
【JAVA毕业设计】基于Vue和SpringBoot的服装商城系统学科竞赛管理系统
java·开发语言·vue.js·spring boot·spring cloud·java-ee·kafka
minDuck22 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!43 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。1 小时前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼1 小时前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui