Vue项目里利用JS深拷贝（函数，Date，RegExp，Map，Set）重新初始化data的数据

前言

最近遇到一个需求，keep-alive 缓存 list 组件，从 detail 组建返回 list 组件，list 组件不刷新，从别的组件跳到 list 组件，list 组件数据初始化（从而实现 list 组件的刷新）。这里如何实现组件数据重新初始化呢？我想到的是利用 JS 深拷贝去实现。

数据深拷贝

• 判断数据类型

  // 检查属性类型
  checkType (any) {
    return Object.prototype.toString.call(any).slice(8, -1)
  },
  

• 深度拷贝（这里是在 Vue 项目写的，故这里展示的代码时常需要用到 this. ）

  // 深度拷贝
  deepCopy (obj) {
    const type = this.checkType(obj)
    if (type === 'Object') {
      const temp = Object.create(Object.prototype)
      for (let key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
          temp[key] = this.deepCopy(obj[key])
        }
      }
      return temp
    } else if (type === 'Array') {
      const temp = []
      for (let i = 0; i < obj.length; i++) {
        temp[i] = this.deepCopy(obj[i])
      }
      return temp
    } else if (type === 'Function') {
      return obj.bind(this)
    } else if (type === 'Date') {
      return new Date(obj.value)
    } else if (type === 'RegExp') {
      return new RegExp(obj)
    } else if (type === 'Set') {
      const temp = new Set()
      for (let val of obj.values()) {
        temp.add(this.deepCopy(val))
      }
      return temp
    } else if (type === 'Map') {
      const temp = new Map()
      obj.forEach((value, key) => {
        temp.set(key, this.deepCopy(value))
      })
      return temp
    }
    return obj
  },
  

重新初始化 data 的数据

在初始化之前，我们需要先了解以下两个数据以及一个方法

• 当前组件的 data ：this.$data
• 当前组件初始化的 data ：this.$options.data()
• 将 other 的属性赋给（重复的会覆盖）cur ：Object.assign(cur, other)

了解了上面的知识点，我们不难想到如何去实现初始化 data 的数据了：

Object.assign(this.$data, this.deepCopy(this.$options.data()))