开发时踩过的坑

1.深拷贝与浅拷贝

作者：魅眼ALong
链接：https://www.jianshu.com/p/a8dc699e9534
来源：简书

基本类型的赋值的两个变量是两个独立相互不影响的变量。
但是引用类型的赋值是传址。只是改变指针的指向，例如，也就是说引用类型的赋值是对象保存在栈中的地址的赋值，这样的话两个变量就指向同一个对象，因此两者之间操作互相有影响。
1、用 JSON.stringify 把对象转成字符串，再用 JSON.parse 把字符串转成新的对象（使用JSON）。

var obj2 = JSON.parse(JSON.stringify(obj1));

坏处：它会抛弃对象的constructor。也就是深拷贝之后，不管这个对象原来的构造函数是什么，在深拷贝之后都会变成Object。所以只适合 Number, String, Boolean, Array 的扁平对象

2、递归拷贝

function deepClone(obj) {
  let objClone = Array.isArray(obj) ? [] : {};
  if (obj && typeof obj === "object") {
    for (key in obj) {
      if (obj.hasOwnProperty(key)) {
        //判断ojb子元素是否为对象，如果是，递归复制
        if (obj[key] && typeof obj[key] === "object") {
          objClone[key] = deepClone(obj[key]);
        } else {
          //如果不是，简单复制
          objClone[key] = obj[key];
        }
      }
    }
  }
  return objClone;
} 

var obj1 = {
   a: 1,
   b: 2,
   c: {
     d: 3
   }
}
var obj2 = deepClone(obj1);
obj2.a = 3;
obj2.c.d = 4;
alert(obj1.a); // 1
alert(obj2.a); // 3
alert(obj1.c.d); // 3
alert(obj2.c.d); // 4

或者使用es6中的 Object.create()方法

function deepClone(initalObj, finalObj) {    
  var obj = finalObj || {};    
  for (var i in initalObj) {        
    var prop = initalObj[i];        // 避免相互引用对象导致死循环，如initalObj.a = initalObj的情况
    if(prop === obj) {            
      continue;
    }        
    if (typeof prop === 'object') {
      obj[i] = (prop.constructor === Array) ? [] : Object.create(prop);
    } else {
      obj[i] = prop;
    }
  }    
  return obj;
}

2.fixed本身是相对于窗口定位的，只有父级元素有transform属性时会影响它

3.vue中遇到的坑 — 变化检测问题（数组相关）

ps：数组直接赋值的话view层没有更新而打印出来的已经更新
解决方法： this.$set(array, index, value); 或者 push或pop
具体原因：https://www.cnblogs.com/zhuzhenwei918/p/6893496.html

4.vue遇到的坑—传值问题

ps：父组件在cread改变传递值a的值，在子组件mounted调用函数需用到接收值a，但接收到的a为null
解决方法：在watch里监听值的变化在调用函数

watch: {
    a: {
      handler(val){
        if(val){
          this.getCurrentVillageName(val)
        }else {
          this.getVillageName()
        }
      }
    }
  },

5.先选择器选择赋值input的值，如果model没有定义input的值，input将没办法改变

6.img图片会有间隙

解决办法：将img的display设置成block

7.给页面加水印，当前页面的元素点击不了

解决方法：水印的背景图加上pointer-events: none;

8.用flex的话，文本内容过大的话会压缩图片的长度

解决方法：flex-shrink: 0;

9.数字或者英文不自动换行

解决办法：word-wrap: break-word;

10.H5开发，苹果手机输入框弹出时页面被放大

解决办法：输入框的字体不要设置小于16px
详细链接：https://www.lmlphp.com/user/16871/article/item/503054/