记录一些使用各种组件库遇到的各种奇奇怪怪的问题

        很久没有记录了，现在记录一些 vue 项目中关于各种组件库什么的，你可能正常使用，但是却可能还是会出现各种奇奇怪怪的 bug 。如 element 的 from 表单校验 ；cascader 级联选择器选择不上、数据回显有问题；上传图片后图片回显出现问题之类的。至于具体的 bug 就不记录了，因为碰到的奇奇怪怪的 bug 太多，并且每个人碰到的可能都不一样。

        现在发现的问题有两个，并附带解决办法，可以解决大部分正常使用却出现的奇奇怪怪的问题：

1. 请求接口后对获取的值进行了浅拷贝

handleApi(params).then(res => {
  // 大部分问题是出现在这里，这里对请求回来的数据进行了浅拷贝，就可能导致各种问题
  const resData = res.data; 
})

这个的解决方法是直接对数据进行深拷贝,下面提供一个简单的深拷贝函数，当然有很多方法，如果数据层级不深可以直接使用展开运算符，JSON.stringify ，还有 lodash 等库可以使用

// 深拷贝 
function deepCopy(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  let result = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      result[key] = deepCopy(obj[key]);
    }
  }
  return result;
}

function deepCopy(obj) {
  return JSON.parse(JSON.stringify(obj));
}

2. 请求回来的数据直接赋值给其他变量，导致该变量失去响应式，对你的一部分操作没有反应，比如点击编辑后获取详情时，需要对这些信息进行编辑。

handleApi(params).then(res => {
  // 大部分问题是出现在这里，这里对请求回来的数据进行了浅拷贝，就可能导致各种问题
  const resData = res.data; 
  // 这步可能对有些组件会造成影响，因为此步只是直接赋值，数据可能没有响应式
  resData.selectArr = res.data.selectArr; 
})

这个的解决办法就是使数据重新获取响应式，最常用的还是 vue 中的 $set，下面会给出两个示例，更多的可以转战 vue 官方文档

handleApi(params).then(res => {

  // 大部分问题是出现在这里，这里对请求回来的数据进行了浅拷贝，就可能导致各种问题
  const resData = res.data; 

  // 这步可能对有些组件会造成影响，因为此步只是直接赋值，数据可能没有响应式
  // resData.selectArr = res.data.selectArr; 

  // 这步就可以使一个数据获取响应式，当然只是对象的使用方法，数组的使用方法在下面给出示例
  this.$set(resData, 'selectArr', res.data.selectArr;)

})


// 数组获取响应式使用方法
handleApi(params).then(res => {

  // 大部分问题是出现在这里，这里对请求回来的数据进行了浅拷贝，就可能导致各种问题
  const resData = res.data; 

  // 这步可能对有些组件会造成影响，因为此步只是直接赋值，数据可能没有响应式
  // resData.selectArr = res.data.selectArr; 

  // 数组获取响应式使用方法
  res.data.selectArr.map((item, index) => {
      this.$set(resData.selectArr, index, item);
  });

})