开发中常见的一些Bug

本文用来记录一些开发工作中常见的一些Bug，欢迎各位大神可以在评论区继续补充，让大家少走弯路：

1、在一些if条件语句出现2>12这种情况，假如在确保数据准确无误的情况下，基本就是数据类型的错误，可能这个2和12是string类型而不是number类型；

2、Vue中对引用数据类型（如对象）进行监听时（watch）记得要加上deep:true；

3、在涉及引用数据类型（数组和对象）的操作时，记得注意是深拷贝还是浅拷贝；

4、注意使用了toFixed函数后返回的是一个string类型的数字而不是number类型的，所以假如我们要对返回的这个数据进行操作的话必须先把它转成number类型的才能进行计算，例如我们鼠标滚动一次数字增加0.1就必须这样写Number((this.imgSize.width + 0.1).toFixed(1))；

5、在模块化传值的过程中，假如说逻辑上基本没问题但就是拿不到某个变量值（控制台报undefined错误）基本都是作用域导致的，用const that = this可解决

6、在计算某个值（例如b）的时候，如果要用到另外一个值（例如a），但是b在代码运算中是会变化的，所以我们必须要先存储一下原始的值，例如我之前在代码中写过：

a += ( b - a ) * percent
b += ( a - b ) * percent

这样就会导致我的变量b本来是想从原先的a和b值计算出来的，从而变成了我用的是变化后的a导致结果一直不尽人意（代码量比较大有时候比较难注意到这些点）

改正后的代码：

let d = b - a
a += d * percent
b += -d * percent

7、在对div设置溢出部分以滑动条方式显示时，一定要注意设置div的高度！
修改前该div的css代码：

.folder-tree {
    .ant-tree li {
      margin-right: 16px;
      overflow: hidden;

      .ant-tree-node-content-wrapper {
        display: inline-flex;
        align-items: center;

        span.ant-tree-iconEle {
          display: inline-flex;
          align-items: center;
        }

        .folder-icon {
          width: 14px;
        }
      }
    }
  }

修改前效果：

修改后代码：

.folder-tree {
    height: 78vh;
    overflow-y: auto;	//这里使用overflow:auto也可以
    .ant-tree li {
      margin-right: 16px;
      overflow: hidden;

      .ant-tree-node-content-wrapper {
        display: inline-flex;
        align-items: center;

        span.ant-tree-iconEle {
          display: inline-flex;
          align-items: center;
        }

        .folder-icon {
          width: 14px;
        }
      }
    }
  }

修改后效果：