columns 内部watch columns, 又修改了columns内部 死循环bug 导致内存溢出 tables.vue 重点解决代码 let res = { ...item }

columns 内部watch columns, 又修改了columns内部 死循环bug 导致内存溢出 tables.vue 重点解决代码 let res = { ...item }

问题

table props 引入 columns
watch 了 columns，然后又对columns内部进行了改写
然后columns变动了，又被watch了，进入了死循环

问题2

开发环境不是马上发现，有触发条件。然后开发环境，还有一个dev保护，发现死循环就给踢了，
但是线上环境就直接卡死了。开始以为是接口调用比较多，后来发现，接口合并后还有这个问题，
才继续排查。

解决

原始代码

handleColumns (columns) {
      this.insideColumns = columns.map((item, index) => {
        let res = { ...item }
        if (res.editable) res = this.suportEdit(res, index)
        if (res.key === 'handle') res = this.surportHandle(res)
        if (res.key === this.nameKey) res = this.surportName(res)
        if (res.key === 'index') res = this.surportIndex(res)
        if (res.key === 'status') res = this.supportStatus(res)
        return res
      })
    },

解决代码

handleColumns (columns) {
      this.insideColumns = columns.map((item, index) => {
        let res = { ...item } // <-- 这个对象进行展开
        if (res.editable) res = this.suportEdit(res, index)
        if (res.key === 'handle') res = this.surportHandle(res)
        if (res.key === this.nameKey) res = this.surportName(res)
        if (res.key === 'index') res = this.surportIndex(res)
        if (res.key === 'status') res = this.supportStatus(res)
        return res
      })
    },