工作中遇到的问题总结

• 复杂数据类型进行复制时，需要进行深拷贝，否则复制的值为栈中存储的地址，修改一个地方，会影响另一个地方

  import { cloneDeep } from 'lodash-es';
  paramFsidMap[newFsid] = cloneDeep(paramFsidMap[oldFsid]);
  //或者使用 JSON.parse(JSON.stringify(param))，这是最简单和直接的方法，但需注意，这种方法有一些限制，比如不能处理函数、undefined、NaN、Infinity等特殊值，也不能处理循环引用

• v-if 卸载dom的同时，也会卸载dom上的事件，两个组件间进行切换时，下一个组件的展示依赖于上一个组件的事件监听逻辑，因此导致切换下一个组件时，上一个 组件的事件被卸载了，下一个组件的展示内容没有被更新。（图片上传组件的加载事件，选区组件图片渲染） 

        方案：上一个组件改用v-show控制显示隐藏 

• 父组件给子组件传参 新增参数时，如果没有获取到参数，主要是因为热更新没有监听到数据新增，可以重启项目来解决
• 涉及到循环的时候，使用取余运算符 % （循环轮播）

  this.currentIndex = (this.currentIndex - 1 + this.bannerList.length) % this.bannerList.length;
  this.currentIndex = (this.currentIndex + 1) % this.bannerList.length;

• 使用img标签底部间隙问题或无法对齐

        原因：css中有类似ps中文本工具的基线，inline标签的默认的垂直对齐方式vertical-align默认值是baseline(基线对齐)，也是以x字母的下方为基准。

观察上方的代码，字体的大小直接影响着超出基线间隙，所以字体大小可以影响基线间隙。

同时行内本身的line-height是会移动基线的（文字垂直居中可以通过line-height实现）。所以行高也是可以影响基线的位置。

解决方法：

1. 第一种方法：修改img行内元素的垂直居中方式，让它不在以基线对齐。 img { vertical-align: bottom; }
2. 第二种方法：修改父元素的行高，使行高变小，这样基线下方的位置基本可以忽略。div { line-height:0px; }
3. 第三种方法：修改img行内元素的字体大小，基线的下方间隙是部分字体超过基线下方而产生的，如果把父元素的
4. font-size变的超小，基线的下方距离将忽略不计。div { font-size:0px; }
5. 第四种方法：直接让img变成块级元素，不在受行内基线的影响。img { display:block; } 或 img { float:left; }因为浮动也可以让元素变成块级
6. 第五种方法：直接不使用img标签，改用div+background形式