vue 封装对象深拷贝方法

vue 封装对象深拷贝方法

1. 在 src/ utils文件夹下面新建index.js

// 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
  }

2. 使用

// 简单使用

<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>

3. 搞定 复制可直接用！