vue踩坑汇总

1 深拷贝

需要特别注意的是，接口数据经常以数组对象返回，如果需要复制该对象操作过程中不改变原数组对象，一定要注意深拷贝，避免数组中对象传址
深拷贝参考链接：
https://www.cnblogs.com/penghuwan/p/7359026.html
考虑性能只对部分元素深拷贝的话，使用immutable

2 computed

bug：计算属性依赖的响应式属性发生变化，却没有改变该属性

原因：根据systemId切换展示的是filterReverseTableData还是reverseTableData(因为systemId为7时，返回的数组对象属性要按选择条件过滤)。

<normalTable v-else :tableData="systemId==7?filterReverseTableData:reverseTableData"></normalTable>

computed: {
  reverseTableData() {
    let result = this.tableData.map(item => {
      return item
    })
    result.reverse()
    filterReverseTableData = result
    return result
  }
}

这样的写法，由于reverseTableData在页面其他位置不被使用，且模板中数据为filterReverseTableData，所以即使发送不同请求改变依赖属性tableData时，不会触发reverseTableData的计算属性，因此不会改变filterReverseTableData，自然不会发生页面的更新

修正：将过滤操作放到computed属性中，结合systemID判断，不需要再新增变量去做过滤

<normalTable v-else :tableData="reverseTableData"></normalTable>

computed: {
  reverseTableData() {
    let result = this.tableData.map(item => {
      return item
    })
    result.reverse()

    if (this.systemId==7) {
      // 需要删除的属性
      let filterColumn = []
      this.moneyTypeList.forEach(elem=>{
        if (elem.checked == false) {
          filterColumn.push(elem.moneytype_name)
        }
      })
      result.forEach(elem=>{
        for (let item in elem) {
          if (filterColumn.includes(item)) {
            delete elem[item]
          }
        }
      })
    } 

    return result
  }
}

理解：computed属性未被使用时，即使该属性依赖的响应式属性发生改变也不会触发computed函数更新视图。

反思：虽然误打误撞get到了一个知识点，但是从解决方案来看，这种bug完全是可以避免的，因为设计的不合理，不止是新增了无谓的根变量，让代码看起来一团糟。总而言之，要合理地设计数据的流向再思考交互，能让代码看起来更清晰合理