日常问题总结

1、vue响应式的原理，数据更新后怎么触发的dom的更新（详细原理）

  首先数据的改变会触发setter的操作，

2、promise中tehn后面的第二个参数代表什么含义，all的含义用法

3、js严格模式与普通模式的区别，开启后有什么不同

4、箭头函数与普通函数有什么区别

5、bable版本

bable6
bable7

6、检验一个对象是否是空值

  (1) object.keys(obj).length==0
  (2) for(let key in obj){
        if(key){
            return true
        }
        return false
      }
  (3) JSON.stringify(obj=='{}'

7、判断一个对象obj是Array还是Object

    var arr = ['aa','bb','cc'];
    var obj = {
        a: 'aa',
        b: 'bb',
        c: 'cc'
    };

(1)obj._proto_==Object.prototype  //如果是某个构造函数构造出来的那么 它的 _proto_是指向构造函数的 prototype属性
(2)Object.prototype.toString.call(obj) === '[object Array]'||'[object Object]'
(3)Array.isArray([])   //true 只能判断是否是数组
(4)obj.constructor===Array||Object
(5)使用instancof  数组也是对象的一种，使用instanceof都会返回true,因此不准确
     console.log(arr instanceof Array); //true
    console.log(arr instanceof Object); //true
    console.log(obj instanceof Array); //false
    console.log(obj instanceof Object); //true
Object.prototype.toString.call()，更加精准

8、flex连写的属性代表指什么

 (1)flex-grow 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
 (2)flex-shrink 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
 (3)flex-basis项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。

9、元素垂直水平居中的方法

(1)把元素变成定位元素,设置元素的定位位置，距离上、左都为50%,设置元素的左外边距、上外边距为宽高的负1/2
(2)把元素变成定位元素,设置元素的定位位置，距离上、左都为50%,设置元素的相对于自身的偏移度为负50%(也就是元素自身尺寸的一半)
(3)把元素变成定位元素,设置元素的定位位置，距离上、下、左、右都为0,设置元素的margin样式值为 auto
(4)flex布局,横轴，纵轴都居中

10、如果实现一个observer，有on emit remove方法

11、this.$nextTick之后做了什么

12、Array.from(of)作用

Array.from将一个类数组转换为一个真实数组
(1)该类数组对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组。
(2)该类数组对象的属性名必须为数值型或字符串型的数字
(3)可以接收第二个参数，类似于map函数，对每个元素进行处理
如 console.log(Array.from(arrayLike, item => item + 1)) 
Array.of用于将一组值转换为数组，总是返回参数值组成的数组。如果没有参数，就返回一个空数组。
(1)Array.of基本上可以用来替代Array()或new Array()，并且不存在由于参数不同而导致的重载。它的行为非常统一。

这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异

13、const定义变量有何意义

(1)定义的基本类型变量存贮在内存栈中，是不能被更改的
(2)定义的引用类型同时占用栈内存和堆内存，是可以更改其属性的。也可以添加赋值，但是不能重新定义因为那样会改变在栈中的地址。
例如
const a={
       name:'haha'
}
console.log(a.name)  //haha
a.age'20'
console.log(a.age)  //20
////////////
a={
    name:'haha1',
    age:20    
}
console.log(a.name)  //Uncaught SyntaxError: Identifier 'c' has already been declared

14、字符串倒序输出

function myReverse(str){
    return str.split('').reverse().join('')
}

15、class中的super字段含义作用

(1)子类继承中 constructor 方法中必须有 super ，且必须出现在 this 之前。
(2)可以通过 super(..) 来实现相对多态，这样任何方法都可以引用原型链上层的同名方 法。

16、盒子模型的区别

(1)标准盒子模型中宽度是 
      width:margin*2+border*2+padding*2+width;
      height:margin*2+border*2+padding*2+height;
(2)IE盒子模型中border
上面的两个宽度相加的属性是一样的。不过在ie中content的宽度包括padding和border这两个属性；
例如一个盒子模型如下：margin:20px,border:10px,padding:10px;width:200px;height:50px;

如果用w3c盒子模型解释，那么这个盒子模型占用的
宽度为：20*2+10*2+10*2+200=280px;
高度：20*2+10*2+20*2+50=130px;
盒子的实际宽度大小为:10*2+10*2+200=240px;
实际高度：10*2+10*2+50=90px;

用ie的盒子模型解释 ：盒子在网页中占据的大小为20*2+200=240px; 高：20*2+50=90px;
盒子的实际大小为：宽度:200px, 高度:50px;

17、事件委托

就是把一个元素响应的事件，委托到另一个元素上，通过该元素进行触发。通常绑定父元素上
利用的是事件冒泡的机制,当事件触发在父元素时，事件会先向下进入捕获阶段，我们通过判断target上的一些属性，可以精确匹配到某一个元素上。
优点：减少性能消耗，若果我们有一个列表，列表之中有大量的列表项，我们需要在点击列表项的时候响应一个事件；如果给每个列表项一一都绑定一个函数，那对于内存消耗是非常大的，效率上需要消耗很多性能； 比较好的方法就是把这个点击事件绑定到他的父层，也就是 ul 上，然后在执行事件的时候再去匹配判断目标元素；所以事件委托可以减少大量的内存消耗，节约效率。


https://vuetifyjs.com/en/
https://nutui.jd.com/#/backtop
http://mint.wkmblog.com/
https://vant-contrib.gitee.io/vant/#/zh-CN/popup#dai-ma-yan-shi