复习：.md · wangyanan/前端知识点学习--杂记

## js基础知识:

### 基本数据类型

```js
1. jS数据类型：Number、String、Boolean、Null、undefined、object、symbol、bigInt。
   JS数据类型：Object 中包含了哪几种类型？

2.① instanceof  操作符
  ②对象的 constructor 属性  
  ③ Array.isArray( ) 检验值是否为数组
  let arr = [];
  console.log(arr.constructor === Array); // true
  
3.Symbol 
    ①对象元素的保护作用:
        var obj3 = { name: '张三', skill: 'web java' };
        let age = Symbol();
        obj3[age] = 18;
        for (let item in obj3) {
            console.log(obj3[item]); // 控制台输出 张三、 web java
        }      
    ②可以解决属性重名的问题。
```

### es6语法

```js
常用的es6语法：
1. let  const
 ①let/const不会出现变量提升，let/const有块级作用域，var是函数作用域
 ②const声明的是一个常量，一旦声明就不能再做变更
 ③声明的变量不可以再次声明，否则会报错
 
 // 注意: let和const声明的变量,如果是在全局定义的,它不会挂载在window上,而是放在script的块级的作用域中
 
 
2.数组 对象  函数的解构
    ①数组以序号位置一一对应，这是一个有序的对应关系。let [a, b, c] = [1, 2, 3];
        // 即: let a = 1;let b = 2;let c = 3;
        //[a,,c]忽略b的写法也允许

let [bar, foo] = [1];
        // 解构失败: undefined
        // 即: let bar = 1; let foo = undefined

let [a] = 1;
        // 等号的右边不是数组 (或者严格地说，不是可遍历的解构)
        // 报错：Uncaught SyntaxError: Identifier 'a' has already been declared

// 如果赋值的字面量全等undefined, 则默认值生效
        let [x = 1] = [undefined]; // x  === 1
        let [x = 1] = []; //x  ===  1

// null 不全等 undefined, 所以默认值不生效
        let [x = 1] = [null]; // x  === null

②对象根据属性名一一对应，这是一个无序的对应关系
        const obj = { a: "aaa", b: "bbb" }; 
        let { a, b,c, d="ddd",a:e} = obj ; 
        // 变量与属性重名对应赋值，即let a=obj .a;let b=obj .b
        // 没有找到对应属性的为undefined，即let c = undefined
        // 对应的属性值严格等于undefined，取默认值，即let d = "ddd"
        // 匹配属性：真正变量，即let e = obj .a(对象中"a"对应的值)
        console.log(a,b,c,d,e);   //aaa bbb undefined ddd aaa
	③解析嵌套结构
        let obj = {
          p: [
            'Hello',
            { y: 'World' }
          ]
        };
        let { p: [x, { y }] } = obj;
        // 注意，这时p是模式，与obj字段对应
        // 继续解构
        // let x="Hello";y = "World";
        console.log(x,y);  //Hello World
	④字符串解构赋值
        let [a, b, c, d, e] = 'hello';  //字符串数组
        console.log(a,b,c,d,e);  //h e l l o

let {length} = 'hello';  
        //类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值
        console.log(length);  //5

3. 模板字符串
        反单引号`` 将整个字符串包裹起来，而在其中使用 ${} 来包裹一个变量或者一个表达式。
        let name = "Bob";
        let time = "today";
        console.log(`Hello ${name}, how are you ${time}?`);

4....   ①展开运算符
            const obj1 = {
              a: 1,
              b: 2, 
              c: 3
            }
            const obj2 = {
              d: 4,
              e: 5,
              f: 6
            }
            const obj3 = {
                ...obj1,
                ...obj2
            }
            console.log(obj3);   //obj1和obj2两对象的结合
       ②剩余参数
        const order = [20.17, 18.67, 1.50, "cheese", "eggs", "milk", "bread"];
        const [total, subtotal, tax, ...items] = order;
        console.log(items);   //数组(4) ["cheese", "eggs", "milk", "bread"]

5. 箭头函数
        ①、this是它的父级作用域中this指向的对象  	
        ②、不可以当作构造函数使用，也就是不能用new命令实例化一个对象，否则会抛出一个错误；
        ③、不可以使用arguments对象，该对象在函数体内不存在，如果要用的话，可以用rest参数代替；
        ④、不可以使用yield命令，箭头函数不能用作Generator函数；
        
    特别注意： 箭头函数没有自己的this。箭头函数会捕获其所在上下文的 this 值，作为自己的 this 值。
    		 如果上下文没有this, 则this指向Window对象

6. Set和Map

set： ①Array.from方法可以将 Set 结构转为数组。
    	  const items = new Set([1, 2, 3, 4, 5]);
		  const array = Array.from(items);

②这就提供了去除数组重复成员的另一种方法。
          function dedupe(array) {
              return Array.from(new Set(array));
          }
		  dedupe([1, 1, 2, 3]) // [1, 2, 3]

③扩展运算符和 Set 结构相结合，就可以去除数组的重复成员。
          let arr = [3, 5, 2, 2, 5, 5];
          let unique = [...new Set(arr)];
          // [3, 5, 2]
		
   map：JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。
        由于对象只接受字符串作为键名，为了解决这个问题，ES6 提供了 Map 数据结构。它类似于对象，也是键值	    对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
        
        创建方法：①const map = new Map([
                    ['name', '张三'],
                    ['title', 'Author']
                 ]);
				②const set = new Set([
                      ['foo', 1],
                      ['bar', 2]
				 ]);
				③const map = new Map();
				   map.set(1, 'aaa')
                   .set(1, 'bbb');
	注意点：①set方法返回的是当前的Map对象，因此可以采用链式写法。
    	   ②只有对同一个对象的引用，Map 结构才将其视为同一个键。这一点要非常小心。
           	同理，同样的值的两个实例，在 Map 结构中被视为两个键。
               
    set/map的区别：
		Set，①它类似数组，但是成员的值都是唯一的，②Set本身是一个构造函数，用来生成 Set 数据结构
        map，①Object 结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应，是一种更完善的 Hash 结
        构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适
        ②Map 数据结构
        
        set：所得元素的只有key没有value，value就是key
        map：所有元素都是键+值存在

set：不允许出现键值重复
        map：map的键是不能修改的，但是其键对应的值是可以修改的
        
    7. 字符串新方法
    	includes()
    8. 数组新方法：
    	filter() //返回符合条件的新数组 
        map() //处理数组中每一个元素返回一个新数组
		Array.from() //将类数组转化为真正的数组
		find() //返回满足条件的第一个成员
		includes()// 返回一个布尔值
		entries() keys() values() // 返回对象的[键：值]  返回对象的keys 返回对象的 values
        for in 
    //①遍历的是对象或者数组的key  ②会遍历所有可枚举的key，包括原型方法属性name/method ③更适合对象
    //for in 可以遍历到对象Object的原型方法method,如果不想遍历原型方法和属性的话，可以在循环内部判断一
    //下,hasOwnPropery方法可以判断某属性是否是该对象的实例属性
	for  of  
	//①遍历出来的是数组的值②for-of循环不支持普通对象
```

### promise

```js
promise：①简单来说就是一个容器，里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上来说，promise是一个对象，从它可以获取到异步操作的消息。
②promise对象有两个特点：1.对象状态不受外界影响。promise对象代表一个异步操作，有3中状态：pedding，fulfilled和rejected。只有异步操作的结果可以决定当前是哪一种状态。任何其他的操作都不可以改变这个状态
2. 一旦状态改变就不会再变，任何时候都可以得到这个结果
```

```js
//promise的基本实现方法
```

```js
async/await:
async返回的是一个promise对象。可以使用.then方法
await相当于promise的.then方法。只有当await后面的回调执行完毕之后，才会继续完后执行。

async函数中的return的值，会在.then方法中当作回调函数的值返回值
await后面可以是一个promise对象，也可以是一个普通数据类型。await会将非promise变更为resolve状态的promise对象

注意：await必须在async的函数中，如果在普通函数中会报错
forEach方法中的第一个回调函数参数改为async的话，会报错。但可以改成for循环
```

### call/apply/bind

```js
首先说明call / apply / bind 三者的相同点
1.都是改变函数的this对象的指向;
2.传入参数都可以是多个,第一个是this所要指向的对象
3.bind方法与call/apply最大的区别就是bind返回一个绑定上下文的函数，而call/apply是直接执行了函数，bind需要调用后才会执行

注意：this可以传入undefined或者null，此时this指向window，this参数可以传入基本类型，call会自动用Object转换，
```

```js
//call方法实现
Function.prototype.myCall = function(context) {
    context = context ? Object(context) : window;
    let fn = Symbol();
    context[fn] = this;
    
    let args = [...arguments].slice(1);
    const result = context[fn](...args);
    
    delete context[fn];
    return result;
}

//apply的实现方式
Function.prototype.myApply = function(context, arr) {
    context = context ? Object(context) : window;
    let fn = Symbol();
    context[fn] = this;
    
    let result;
    if (arr) {
        result = context[fn](...arr);
    } else {
        result = context[fn]();
    }
    
    delete context[fn];
    return result;
}
//bind
Function.prototype.bind2 = function (context) {
    if (typeof this !== 'function') {
    throw new Errow('Function.prototype.bind - what is trying to be bound is not callable');
    }
    const self = this;
    const args = [...arguments].slice(1);
    
    const fBound = function () {
        const bindArgs = [...arguments];
        return self.apply(
            this instanceof fBound ? this : context,
            args.concat(bindArgs)
        );
    }
    // 直接使用ES5的 Object.create()方法生成一个新对象
    fBound.prototype = Object.create(this.prototype);
    // 或者：
    // const fNOP = function () {}; // 创建一个空对象
    // fNOP.prototype = this.prototype; // 空对象的原型指向绑定函数的原型
    // fBound.prototype = new fNOP(); // 空对象的实例赋值给 fBound.prototype
    
    return fBound;
}

```

```js
//bind实现过程
var obj = {name:"Smiley"};
var greeting = function(str, lang){
    this.value = 'greetingValue';
    console.log("Welcome "+this.name+" to "+str+" in "+lang);
};
var objGreeting = greeting.myBind(obj, 'the world');

objGreeting('JS')

Function.prototype.myBind = function() {
    var thatFunc = this, 
        thatArg = arguments[0];
 
    return function(){
      return thatFunc.apply(thatArg);
    };
}
```

### 实现一个new

```js
function myNew(Con,...args) {
    let obj = {};
    let ObjPrototype = Object.create(Con.prototype)
    obj.__proto__ = ObjPrototype;
    let result = Con.apply(Obj,args)
    return result instanceof Object ? result : Obj
}

// 1.创建一个空对象
// 2.将新对象的__proto__指向构造函数的原型
// 3.执行构造函数中的代码,将属性和方法添加给新对象
// 4.如果这个函数有返回值,就返回,如果返回值不是基本数据类型,
// 比如undefined,null,数值等,就就返回这个新的对象
```

### 箭头函数不能new
1. 箭头函数没有this,使用new的时候,需要使用this,将this对应的属性设置为new出来的对象的属性
2. 箭头函数是没有prototype的,new出来的实例,需要使实例的__proto__指向构造函数的prototype

基于以上两点,是不符合实现new的要求,所以当new箭头函数的时候会报错

拷贝，深克隆和浅克隆

```js
//深度克隆就是：把一个对象里面的东西一模一样地复制到另一个对象，并且这两个对象分别放在内存的不同地方。
function deepClone(obj) {
    let newObj = Array.isArray(obj) ? [] : {}
    if (obj && typeof obj === "object") {
        for (let key in obj) {
            if (obj.hasOwnProperty(key)) {
            newObj[key] = (obj && typeof obj[key] === 'object') ? deepClone(obj[key]) :obj[key];
            }
        }
    } 
    return newObj
}
//assign  使用这个方法只是浅拷贝  浅拷贝会将第一层属性做深拷贝，但是如果有第二层复杂数据类型，还是会互相影响
const newObj = Object.assign({},oldObj);
//使用json.stringify
const newObj = JSON.parse(JSON.stringify(oldObj));
//如果obj里面有时间对象，则JSON.stringify后再JSON.parse的结果，时间将只是字符串的形式。而不是时间对象；如果obj里有RegExp、Error对象，则序列化的结果将只得到空对象；
//如果obj里有function，Symbol 类型，undefined，则序列化的结果会把函数或 undefined丢失；
//如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null 
//JSON.stringify()只能序列化对象的可枚举的自有属性，例如 如果obj中的对象是有构造函数生成的， 则使用JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的constructor
var obj2 = $.extend(true, {}, obj1);
//深拷贝
var b = a.slice();
//浅拷贝
//等同于方法一， 属于对象浅拷贝
const obj1 = {a: 1, b: 2};
// obj2 equal obj1
const obj2 = {...obj1};
```

```js
   const obj = {
        a: 1,
        children: [1, 2, 3],
      };
      let obj1 = {
        ...obj,
        children: [4,5,6],
      }
      console.log("obj1",obj1)

// 在obj1中通过...obj的形式,对obj对象进行浅拷贝,
// 同时如果在obj1中,有与obj中相同的children属性时,
// 会覆盖掉原来obj中的children属性,如果改为children1,那么obj1
// obj1: {
// a: 1,
// children: [1, 2, 3],
// children1: [4,5,6],
// }
```

### js中的继承和原型链

```js
new关键字的过程 
 1. 会向内存申请一块空间，存放对象。
 2. this关键字会指向内存中存放对象的空间。（this代表了当前创建的对象）
 3. 通过this关键字向内存中的对象中添加属性和方法
 4. 会把this返回给外部接收的变量
 
 
 es6实现继承
 //class 声明构造函数的关键字
 //包括constructor来声明属性  sayHi()声明方法
 class Person{
     constructor(name,age){
         this.name = name;
         this.age = age
     }
     sayHi(){
         console.log('sayHi')
     }
    static eat(){
         console.log('eat so much')
     }
 }
 // 继承父组件的属性和方法
class Child extends Person{
    constructor(name,studenNumber){
        super(name)
        this.studenNumber = studenNumber
    }
    //在子类的普通方法中，通过super可以访问到父类的原型对象
    say(){
        console.log(super.sayHi())
    }
}
var child = new Child('王名')
child.eat() // 'eat so much'   //父类中的静态方法会被子类继承，可以在子类中通过类名调用
//es6中子类构造函数中必须使用super才可以使用this关键字，因为子类的构建是基于父类构建的，只有super方法才能调用父类实例
//es6要求子类构造函数必须执行一次super

//es5中实现继承
//属性继承，使用call方法，方法继承，使用prototype,将子类的prototype指向父类的一个实例
function Person(name,age){
    this.name = name
    this.age = age
    this.sayHello = function(){
        console.log('sayHello')
    }
}
function Student(name,age,studenId) {
    this.studenId = studenId
    //属性继承
    Person.call(this,name,age)
    Student.prototype = new Person()
}
var student = new Student('张三'，'17'，'191675')
// {name:张三；age：17，studentId:'191675'}
```

### 原型链

![image-20200405231542826](/var/folders/xb/wqf9hbwx7cj4d_slgkx7nn100000gn/T/abnerworks.Typora/image-20200405231542826.png)

```html
原型链：
它是一种基于__proto__向上查找的机制，当我们操作实例的某个属性或者方法的时候，首先找到自己空间中私有的属性或者方法
1.找到了，则结束查找，使用自己的私有即可
2.没有找到 则基于__proto__ 找所属类的prototype,如果找到了就用这个公有的，如果没找到，基于原型上的__proto__继续向上查找，
一直找到Object:prototype的原型为止，如果在没有，操作的属性或者方法不存在。
```

### 闭包

```js
闭包是一种特殊的对象。闭包就是指有权访问另一个函数作用域中的变量的函数

运用闭包的关键：
闭包引用外部函数变量对象中的值
在外部函数的外部调用闭包

闭包的缺陷： 常驻内存增大内存使用量

使用场景，模块模式中，在模块中为单例创建私有变量和方法
//匿名函数最大的用途是创建闭包，而且还可以构建命名空间，以减少
```

## vue知识点

### 0.那你能讲一讲MVVM吗？

```js
MVVM是`Model-View-ViewModel`缩写，也就是把`MVC`中的`Controller`演变成`ViewModel`。Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据。
```

### 1.简单说一下Vue2.x响应式数据原理

```html
Vue在初始化数据时，会使用`Object.defineProperty`重新定义data中的所有属性，当页面使用对应属性时，首先会进行依赖收集(收集当前组件的`watcher`)如果属性发生变化会通知相关依赖进行更新操作(`发布订阅`)。
```

### 2.那你知道Vue3.x响应式数据原理吗？

(还好我有看，这个难不倒我)

```html
Vue3.x改用`Proxy`替代Object.defineProperty。因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。

> ❝
>
> Proxy只会代理对象的第一层，那么Vue3又是怎样处理这个问题的呢？
>
> ❞

（很简单啊）

判断当前Reflect.get的返回值是否为Object，如果是则再通过`reactive`方法做代理， 这样就实现了深度观测。

> ❝
>
> 监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？
>
> ❞

我们可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger。

面试官抬起了头。心里暗想

(这小子还行，比上两个强，应该是多多少少看过Vue3的源码了)
```

3.再说一下vue2.x中如何监测数组变化

```html
使用了函数劫持的方式，重写了数组的方法，Vue将data中的数组进行了原型链重写，指向了自己定义的数组原型方法。这样当调用数组api时，可以通知依赖更新。如果数组中包含着引用类型，会对数组中的引用类型再次递归遍历进行监控。这样就实现了监测数组变化。

（能问到这的面试官都比较注重深度，这些常规操作要记牢）

（原型链的细节可以参考我的另一篇专栏）

[一文带你彻底搞懂JavaScript原型链](https://juejin.im/post/5d31ea79e51d457778117452)
```

### 4.nextTick知道吗，实现原理是什么？

```html
在下次 DOM 更新循环结束之后执行延迟回调。nextTick主要使用了宏任务和微任务。根据执行环境分别尝试采用

- Promise
- MutationObserver
- setImmediate
- 如果以上都不行则采用setTimeout

定义了一个异步方法，多次调用nextTick会将方法存入队列中，通过这个异步方法清空当前队列。

（关于宏任务和微任务以及事件循环可以参考我的另两篇专栏）

(看到这你就会发现，其实问框架最终还是考验你的原生JavaScript功底)

[浏览器中JavaScript的事件循环](https://juejin.im/post/5d2036106fb9a07eb15d76e9)

[Node.js事件循环](https://juejin.im/post/5de095dd6fb9a071b5615db2)
```

### 5.说一下Vue的生命周期

`beforeCreate`是new Vue()之后触发的第一个钩子，在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。

`created`在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发updated函数。可以做一些初始数据的获取，在当前阶段无法与Dom进行交互，如果非要想，可以通过vm.$nextTick来访问Dom。

`beforeMount`发生在挂载之前，在这之前template模板已导入渲染函数编译。而当前阶段虚拟Dom已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发updated。

`mounted`在挂载完成后发生，在当前阶段，真实的Dom挂载完毕，数据完成双向绑定，可以访问到Dom节点，使用$refs属性对Dom进行操作。

`beforeUpdate`发生在更新之前，也就是响应式数据发生更新，虚拟dom重新渲染之前被触发，你可以在当前阶段进行更改数据，不会造成重渲染。

`updated`发生在更新完成之后，当前阶段组件Dom已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新。

`beforeDestroy`发生在实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器。

`destroyed`发生在实例销毁之后，这个时候只剩下了dom空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。

(关于Vue的生命周期详解感兴趣的也请移步我的另一篇专栏)

[从源码解读Vue生命周期，让面试官对你刮目相看](https://juejin.im/post/5d1b464a51882579d824af5b)

### 6.你的接口请求一般放在哪个生命周期中？

接口请求一般放在`mounted`中，但需要注意的是服务端渲染时不支持mounted，需要放到`created`中。

### 7.再说一下Computed和Watch

`Computed`本质是一个具备缓存的watcher，依赖的属性发生变化就会更新视图。 适用于计算比较消耗性能的计算场景。当表达式过于复杂时，在模板中放入过多逻辑会让模板难以维护，可以将复杂的逻辑放入计算属性中处理。

`Watch`没有缓存性，更多的是观察的作用，可以监听某些数据执行回调。当我们需要深度监听对象中的属性时，可以打开`deep：true`选项，这样便会对对象中的每一项进行监听。这样会带来性能问题，优化的话可以使用`字符串形式`监听，如果没有写到组件中，不要忘记使用`unWatch手动注销`哦。

### 8.说一下v-if和v-show的区别

当条件不成立时，`v-if`不会渲染DOM元素，`v-show`操作的是样式(display)，切换当前DOM的显示和隐藏。

### 9.组件中的data为什么是一个函数？

一个组件被复用多次的话，也就会创建多个实例。本质上，`这些实例用的都是同一个构造函数`。如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突，data必须是一个函数。

### 10.说一下v-model的原理

`v-model`本质就是一个语法糖，可以看成是`value + input`方法的语法糖。 可以通过model属性的`prop`和`event`属性来进行自定义。原生的v-model，会根据标签的不同生成不同的事件和属性。

### 11.Vue事件绑定原理说一下

原生事件绑定是通过`addEventListener`绑定给真实元素的，组件事件绑定是通过Vue自定义的`$on`实现的。

> ❝
>
> 面试官：(这小子基础还可以，接下来我得上上难度了)
>
> ❞

### 12.Vue模版编译原理知道吗，能简单说一下吗？

简单说，Vue的编译过程就是将`template`转化为`render`函数的过程。会经历以下阶段：

- 生成AST树
- 优化
- codegen

首先解析模版，生成`AST语法树`(一种用JavaScript对象的形式来描述整个模板)。 使用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行对应的钩子进行相关处理。

Vue的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变化，对应的DOM也不会变化。那么优化过程就是深度遍历AST树，按照相关条件对树节点进行标记。这些被标记的节点(静态节点)我们就可以`跳过对它们的比对`，对运行时的模板起到很大的优化作用。

编译的最后一步是`将优化后的AST树转换为可执行的代码`。

> ❝
>
> 面试官：(精神小伙啊，有点东西，难度提升，不信难不倒你)
>
> ❞

### 13.Vue2.x和Vue3.x渲染器的diff算法分别说一下

简单来说，diff算法有以下过程

- 同级比较，再比较子节点
- 先判断一方有子节点一方没有子节点的情况(如果新的children没有子节点，将旧的子节点移除)
- 比较都有子节点的情况(核心diff)
- 递归比较子节点

正常Diff两个树的时间复杂度是`O(n^3)`，但实际情况下我们很少会进行`跨层级的移动DOM`，所以Vue将Diff进行了优化，从`O(n^3) -> O(n)`，只有当新旧children都为多个子节点时才需要用核心的Diff算法进行同层级比较。

Vue2的核心Diff算法采用了`双端比较`的算法，同时从新旧children的两端开始进行比较，借助key值找到可复用的节点，再进行相关操作。相比React的Diff算法，同样情况下可以减少移动节点次数，减少不必要的性能损耗，更加的优雅。

Vue3.x借鉴了 [ivi](https://github.com/localvoid/ivi)算法和 [inferno](https://github.com/infernojs/inferno)算法

在创建VNode时就确定其类型，以及在`mount/patch`的过程中采用`位运算`来判断一个VNode的类型，在这个基础之上再配合核心的Diff算法，使得性能上较Vue2.x有了提升。(实际的实现可以结合Vue3.x源码看。)

该算法中还运用了`动态规划`的思想求解最长递归子序列。

(看到这你还会发现，框架内无处不蕴藏着数据结构和算法的魅力)

> ❝
>
> 面试官：(可以可以，看来是个苗子，不过自我介绍属实有些无聊，下一题)
>
> ❞

(基操，勿6)

### 14.再说一下虚拟Dom以及key属性的作用

由于在浏览器中操作DOM是很昂贵的。频繁的操作DOM，会产生一定的性能问题。这就是虚拟Dom的`产生原因`。

Vue2的Virtual DOM借鉴了开源库`snabbdom`的实现。

`Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点。是对真实DOM的一层抽象。`(也就是源码中的VNode类，它定义在src/core/vdom/vnode.js中。)

VirtualDOM映射到真实DOM要经历VNode的create、diff、patch等阶段。

**「key的作用是尽可能的复用 DOM 元素。」**

新旧 children 中的节点只有顺序是不同的时候，最佳的操作应该是通过移动元素的位置来达到更新的目的。

需要在新旧 children 的节点中保存映射关系，以便能够在旧 children 的节点中找到可复用的节点。key也就是children中节点的唯一标识。

### 15.keep-alive了解吗

`keep-alive`可以实现组件缓存，当组件切换时不会对当前组件进行卸载。

常用的两个属性`include/exclude`，允许组件有条件的进行缓存。

两个生命周期`activated/deactivated`，用来得知当前组件是否处于活跃状态。

keep-alive的中还运用了`LRU(Least Recently Used)`算法。

（又是数据结构与算法，原来算法在前端也有这么多的应用）

### 16.Vue中组件生命周期调用顺序说一下

组件的调用顺序都是`先父后子`,渲染完成的顺序是`先子后父`。

组件的销毁操作是`先父后子`，销毁完成的顺序是`先子后父`。

### 加载渲染过程

```
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount- >子mounted->父mounted
```

### 子组件更新过程

```
父beforeUpdate->子beforeUpdate->子updated->父updated
```

### 父组件更新过程

```
父 beforeUpdate -> 父 updated
```

### 销毁过程

```
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
```

### 17.Vue2.x组件通信有哪些方式？

- 父子组件通信

父->子`props`，子->父 `$on、$emit`

获取父子组件实例 `$parent、$children`

`Ref` 获取实例的方式调用组件的属性或者方法

`Provide、inject` 官方不推荐使用，但是写组件库时很常用

- 兄弟组件通信

`Event Bus` 实现跨组件通信 `Vue.prototype.$bus = new Vue`

`Vuex`

- 跨级组件通信

`Vuex`

`$attrs、$listeners`

`Provide、inject`

### 18.SSR了解吗？

SSR也就是服务端渲染，`也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把html直接返回给客户端`。

SSR有着更好的SEO、并且首屏加载速度更快等优点。不过它也有一些缺点，比如我们的开发条件会受到限制，服务器端渲染只支持`beforeCreate`和`created`两个钩子，当我们需要一些外部扩展库时需要特殊处理，服务端渲染应用程序也需要处于Node.js的运行环境。还有就是服务器会有更大的负载需求。

### 19.你都做过哪些Vue的性能优化？

### 编码阶段

- 尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher
- v-if和v-for不能连用
- 如果需要使用v-for给每项元素绑定事件时使用事件代理
- SPA 页面采用keep-alive缓存组件
- 在更多的情况下，使用v-if替代v-show
- key保证唯一
- 使用路由懒加载、异步组件
- 防抖、节流
- 第三方模块按需导入
- 长列表滚动到可视区域动态加载
- 图片懒加载

### SEO优化

- 预渲染
- 服务端渲染SSR

### 打包优化

- 压缩代码
- Tree Shaking/Scope Hoisting
- 使用cdn加载第三方模块
- 多线程打包happypack
- splitChunks抽离公共文件
- sourceMap优化

### 用户体验

- 骨架屏
- PWA

还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等。

(优化是个大工程，会涉及很多方面，这里申请另开一个专栏)

### 20 路由

## css

### flex布局：父容器属性

父容器上有六个属性

- flex-direction：主轴的方向。

flex-direction: row;                // 默认值，主轴为水平方向，起点在左端。

flex-direction: row-reverse;        // 主轴为水平方向，起点在右端。

flex-direction: column;             // 主轴为垂直方向，起点在上。

flex-direction: column-reverse;     // 主轴为垂直方向，起点在下。

- [flex-wrap：超出父容器子容器的排列样式。](flex-wrap)

- flex-flow：`flex-direction` 属性和 `flex-wrap` 属性的简写形式。

- justify-content：子容器在主轴的排列方向。

justify-content: flex-start;      // 默认，左对齐

justify-content: flex-end;        // 右对齐

justify-content: center;          // 居中

justify-content: space-between;   // 两端对齐，项目之间的间隔都相等。

justify-content: space-around;    // 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔

大一倍。

- align-items：子容器在交叉轴的排列方向。

align-items: flex-start;    // 交叉轴的起点对齐。

align-items: flex-end;      // 交叉轴的终点对齐。

align-items: center;        // 交叉轴的中点对齐。

align-items: baseline;      // 项目的第一行文字的基线对齐。

align-items: stretch;       // 默认，如果项目未设置高度或设为auto，将占满整个容器的高度

- align-content：多根轴线的对齐方式。

align-content: flex-start;   // 与交叉轴的起点对齐     
        
       align-content; flex-end;     // 与交叉轴的终点对齐。     
        
       align-content: center;       // 与交叉轴的中点对齐。     
        
       align-content: space-between;// 与交叉轴两端对齐，轴线之间的间隔平均分布。

align-content: space-around; // 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间

隔大一倍。

align-content: stretch;     // 默认 轴线占满整个交叉轴。

子容器： flex：1  表示子容器占几份

### position:

```js
//如果没有position：relative，只是给了position：absolute的话会怎么样
```

## http

### 1.介绍Http2，优点和存在什么坑或问题：

```html
优点：
1.更小的传输体积，更小或者省略重复的头消息
2.突破原有的 TCP 连接并发限制，使用一个 TCP 连接即可实现多请求并发，单链接也能减轻服务端的压力（更少的内存和 CPU 使用）
3.慢的请求或者先发送的请求不会阻塞其他请求的返回
4.数据传输优先级可控，使网站可以实现更灵活和强大的页面控制
5.能在不中断 TCP 连接的情况下停止（重置）数据的发送
```

```html
缺点：
tcp 以及tcp+tls建立连接延时，两个握手延时
tcp队头阻塞
```

### 2.HTTP报文的请求和返回会有几个部分（请求行、请求头、请求体）；每部分具体都有什么（常见的请求头）

```js
**请求**
请求行：①是请求方法②为请求对应的URL地址③是协议名称及版本号
请求头：Accept 告诉服务端 客户端接受什么类型的响应
cookie：客户端的Cookie就是通过这个报文头属性传给服务端的哦
Cache-Control：对缓存进行控制
Host：客户机通过这个头告诉服务器，想访问的主机名。
Content-Type：请求体对应的MIME信息
If-Modified-Since：如果请求的部分在指定时间之后被修改则请求成功，未被修改则返回304代码(绝对时间)
Authorization：HTTP授权的授权证书
请求体：发送给后端的数据

**响应**
响应行：协议版本、状态码及其描述组成 比如 HTTP/1.1 200 OK
响应头：Allow：服务器支持哪些请求方法(如GET、POST等)。
Content-Encoding:服务器通过这个头，告诉浏览器数据采用的压缩格式
Content-Language：服务器通过这个头，告诉服务器的语言环境
Content-Type:服务器通过这个头，回送数据的类型
Last-Modified:服务器通过这个头，告诉浏览器当前资源的缓存时间。
响应体：响应回来的内容

```

```html
状态码：
2XX	成功（这系列表明请求被正常处理了）
200 表示从客户端发来的请求在服务器端被正确处理

301：永久重定向
302：临时重定向
304 not modified，表示服务器允许访问资源，但请求未满足条件的情况
 (对于301/302/303响应，几乎所有浏览器都会删除报文主体并自动用GET重新请求）

4XX	客户端错误
400 bad request，请求报文存在语法错误
401 unauthorized，表示发送的请求需要有通过 HTTP 认证的认证信息
403 forbidden
404 not found，表示在服务器上没有找到请求的资源

5XX	服务器错误
500	internal sever error，表示服务器端在执行请求时发生了错误
```

### 3.GET和POST的区别

```html
get一般用来获取服务器的信息的，post一般是用来更新信息的
get请求提交的url中的数据有长度限制，post请求则没有大小限制。
get请求的数据会附在URL之后，post请求是把请求的数据放在请求体中。
```

### 4.输入url到页面加载全过程（必考）

```html
DNS解析(优化：1.DNS负载均衡 2.DNS缓存)
TCP连接
发送HTTP请求
服务器处理请求并返回HTTP报文
浏览器解析渲染页面
连接结束
		解析HTML，构建DOM树
        解析CSS，生成CSS规则树
        合并DOM树和CSS规则树，生成render树
        布局render树（layout/reflow），负责各元素尺寸、位置的计算
        绘制render树（paint），绘制页面像素信息
        浏览器会将各层的信息发送给GUI，GUI会将各层合成（composite），显示在屏幕上。
```

### 5.介绍HTTPS；HTTP和HTTPS的区别（必考）

```js
　HTTPS：是以安全为目标的HTTP通道，简单讲是HTTP的安全版
  HTTP协议传输的数据都是未加密的，也就是明文的，因此使用HTTP协议传输隐私信息非常不安全，为了保证这些隐私数
    据能加密传输,从而就诞生了HTTPS
**简单来说，HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全**
  
   1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
　　2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
   3.http 和 https 使用的是完全不同的连接方式，用的端口也不一样，前者是 80，后者是 443。
   4.HTTPS协议握手阶段比较费时，会使页面的加载时间延长近50%，增加10%到20%的耗电
   5.SSL证书需要钱，功能越强大的证书费用越高，个人网站、小网站没有必要一般不会用。
   6.HTTPS协议的加密范围也比较有限，在黑客攻击、拒绝服务攻击、服务器劫持等方面几乎起不到什么作用。最关键的，SSL证书的信用链体系并不安全，特别是在某些国家可以控制CA根证书的情况下，中间人攻击一样可行。
```

### 6.HTTP缓存控制（强缓存、弱缓存）；缓存相关的HTTP请求头（必考）

```js
强缓存
协商缓存（对比缓存）
浏览器在加载资源时，会先判断是否命中强缓存再验证是命中协商缓存。
//第一次请求肯定是没有缓存，服务器除了返回body主体数据之外，还返回一个header头部信息，其中包括了缓存的信息
强缓存一般是这样一个流程：

//强缓存:
查看缓存资源的header 头中的 Cache-control 来判断是否满足规则；
如果满足规则，就返回缓存的数据；
//如果不满足规则，就向服务器发送请求；
//服务器返回数据；
//将新数据存入缓存。
Cache-Control:它包含一个 max-age 属性，该字段表示资源缓存的最大有效时间，这就是一个相对时间。

//协商缓存:
当强缓存没有命中的时候，浏览器会发送一个请求到服务器，服务器根据请求头中的部分信息来判断是否命中缓存。
如果资源未更新，请求响应返回的http状态为 304 并且会显示一个 Not Modified 的字符串，告诉浏览器使用本地缓存;
如果资源已经更新，返回新的数据；
将新数据存入缓存。

//Last-Modified，If-Modified-Since:
Last-Modified，If-Modified-Since
浏览器第一次请求资源的时候，服务器返回的 header 上会带有一个 Last-Modified 字段，表示资源最后修改的时间。
//Last-Modified: Fri, 27 Oct 2017 07:55:30 GMT
//同样的，这是一个 GMT 的绝对时间。
当浏览器再次请求该资源时，请求头中会带有一个 If-Modified-Since 字段，这个值是第一次请求返回的 Last-Modified 的值。服务器收到这个请求后，将 If-Modified-Since 和当前的 Last-Modified 进行对比。如果相等，则说明资源未修改，返回 304，浏览器使用本地缓存。

这个方法也是有缺点的：

最小单位是秒。也就是说如果我短时间内资源发生了改变，Last-Modified 并不会发生变化；
周期性变化。如果这个资源在一个周期内修改回原来的样子了，我们认为是可以使用缓存的，但是 Last-Modified 可不这样认为。
所以，后来又引入一个 Etag。

Etag
Etag 一般是由文件内容 hash 生成的，也就是说它可以保证资源的唯一性，资源发生改变就会导致 Etag 发生改变。

同样地，在浏览器第一次请求资源时，服务器会返回一个 Etag 标识。当再次请求该资源时， 会通过 If-no-match 字段将 Etag 发送回服务器，然后服务器进行比较，如果相等，则返回 304 表示未修改。

**Last-Modified 和 Etag 是可以同时设置的，服务器会优先校验 Etag，如果 Etag 相等就会继续比对 Last-Modified，最后才会决定是否返回 304。**
    
**总结**
1.看看是否命中强缓存，如果命中，就直接使用缓存了；
2.如果没有命中强缓存，就发请求到服务器检查是否命中协商缓存；
3.如果命中协商缓存，服务器会返回 304 告诉浏览器使用本地缓存；
4.否则，返回最新的资源。
```

### 7.对跨域的了解，跨域怎么解决（必考）

```js
跨域是由浏览器同源策略引起的，是指页面请求的接口地址，必须与页面url地址处于同域上（即域名，端口，协议相同）。这是为了防止某域名下的接口被其他域名下的网页非法调用，是浏览器对JavaScript施加的安全限制。

1.JSONP：利用script标签可跨域的特点，在跨域脚本中可以直接回调当前脚本的函数。
2.CORS：服务器设置HTTP响应头中Access-Control-Allow-Origin值，解除跨域限制。
3.nginx作代理：
  实现原理：1.当获取非接口数据时，让代理服务器指向开发者本机的资源。当访问接口时，访问后端接口数据。
  实施步骤：1.首先修改hosts文件，将域名指向开发者的电脑本身，把自己伪装成服务端
		  2.再通过nginx对不同的请求进行转发，把静态资源指向开发者本地电脑的资源将接口指向实际的服务器。
```

### 8.cors的返回头、cors预请求，什么时候会出发预请求（必考）

```js
1. 发生preflight请求的条件:

满足下面的所有条件就不会产生预检请求，也就是该请求是简单请求：
请求方法是GET、POST、HEAD其中任意一个
必须是下面定义对CORS安全的首部字段集合，不能是集合之外的其他首部字段。
Accept、Accept-Language、Content-Language、Content-Type、DPR、Downlink、Save-Data、Viewport-Width、Width。
Content-Type的值必须是text/plain、multipart/form-data、application/x-www-form-urlencoded中任意一个值

满足上面所有的条件才不会发送预检请求

2. CORS prefligt请求
preflight请求，就是在发生cors请求时，浏览器检测到跨域请求，会自动发出一个OPTIONS请求来检测本次请求是否被服务器接受。一个OPTIONS请求一般会携带下面两个与CORS相关的头：

Access-Control-Request-Method : 本次预检请求的请求方法。
Access-Control-Request-Headers：本次请求所携带的自定义首部字段。这些字段是导致产生OPTIONS请求的一个原因。后面会讲到。
这样，服务端收到该预检请求后，会返回与CORS相关的响应头。主要会包括下面几个，但可能还会有其他的有关CORS字段：

Access-Control-Allow-Origin: 服务器允许的跨域请求源
Access-Control-Allow-Methods: 服务器允许的请求方法
Access-Control-Allow-Headers : 服务器允许的自定义的请求首部字段

*需要注意的是*：

1、在上面的两次请求中，预检请求只是一个检查的过程，它不会携带任何请求的参数；预检通过后的请求才会真正的携带请求参数与服务器进行数据通信。

2、若服务器对预检请求没有任何响应，那么浏览器不知道服务器是否支持CORS而不会发送后续的实际请求；或者服务器不支持当前的Origin跨域访问也不会发送后续请求。

```

### 9.前端性能优化（必考）

vue：如上

其他

```js
webpack优化
【打包公共代码】
使用CommonsChunkPlugin插件，将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存到缓存中供后续使用。这会带来速度上的提升，因为浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加载一个更大的文件
webpack 4 将移除 CommonsChunkPlugin, 取而代之的是两个新的配置项 optimization.splitChunks 和 optimization.runtimeChunk
通过设置 optimization.splitChunks.chunks: "all" 来启动默认的代码分割配置项
【动态导入和按需加载】
　　webpack提供了两种技术通过模块的内联函数调用来分离代码，优先选择的方式是，使用符合 ECMAScript 提案 的 import() 语法。第二种，则是使用 webpack 特定的 require.ensure
```

资源加载

```js
优化资源加载

【资源加载位置】
　　通过优化资源加载位置，更改资源加载时机，使尽可能快地展示出页面内容，尽可能快地使功能可用
　　1、CSS文件放在head中，先外链，后本页
　　2、JS文件放在body底部，先外链，后本页
　　3、处理页面、处理页面布局的JS文件放在head中，如babel-polyfill.js文件、flexible.js文件
　　4、body中间尽量不写style标签和script标签
【资源加载时机】
　　1、异步script标签
　　defer:  异步加载，在HTML解析完成后执行。defer的实际效果与将代码放在body底部类似
　　async: 异步加载，加载完成后立即执行
　　2、模块按需加载
　　在SPA等业务逻辑比较复杂的系统中，需要根据路由来加载当前页面需要的业务模块
　　按需加载，是一种很好的优化网页或应用的方式。这种方式实际上是先把代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后，立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载

webpack 提供了两个类似的技术，优先选择的方式是使用符合 ECMAScript 提案 的 import() 语法。第二种则是使用 webpack 特定的 require.ensure

3、使用资源预加载preload和资源预读取prefetch

preload让浏览器提前加载指定资源，需要执行时再执行，可以加速本页面的加载速度

prefetch告诉浏览器加载下一页面可能会用到的资源，可以加速下一个页面的加载速度

4、资源懒加载与资源预加载

资源延迟加载也称为懒加载，延迟加载资源或符合某些条件时才加载某些资源

资源预加载是提前加载用户所需的资源，保证良好的用户体验

资源懒加载和资源预加载都是一种错峰操作，在浏览器忙碌的时候不做操作，浏览器空间时，再加载资源，优化了网络性能
```

```js
**关键请求链**
（Critical-Request-Chains）的概念。可视区域渲染完毕（首屏），并对于用户来说可用时，必须加载的资源请求队列，就叫做关键请求链。这样，我们可以通过关键请求链，来确定优先加载的资源以及加载顺序，以实现浏览器尽可能快地加载页面
通过优化关键请求链实现优化的作用
第一种：利用Preload和Prefetch。
Preload来告诉浏览器预先请求当前页需要的资源，从而提高这些资源的请求优先级。比如，对于那些本来请求优先级较低的关键请求，我们可以通过设置Prefetch来提升这些请求的优先级。
Prefetch来告诉浏览器用户将来可能在其他页面（非本页面）可能使用到的资源，那么浏览器会在空闲时，就去预先加载这些资源放在http缓存内，最常见的dns-prefetch
```

```js
第二种：利用LocalStorage。
既然第一种的预加载技术来进行资源缓存的支持性较差，那么通常可以利用LocalStorage来对部分请求的数据和结果进行缓存，省去发送http请求所消耗的时间，从而提高网页的响应速度。
这类做法在移动端应用已经十分广泛。下面分别介绍鹅、猫、狗三家页面是如何利用LS来进行请求缓存的
```

###  10.节流/防抖

```js
//节流throttle代码：
function throttle(fn) {
    let canRun = true; // 通过闭包保存一个标记
    return function () {
         // 在函数开头判断标记是否为true，不为true则return
        if (!canRun) return;
         // 立即设置为false
        canRun = false;
        // 将外部传入的函数的执行放在setTimeout中
        setTimeout(() => { 
        // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。
        // 当定时器没有执行的时候标记永远是false，在开头被return掉
            fn.apply(this, arguments);
            canRun = true;
        }, 500);
    };
}
function sayHi(e) {
    console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi));
// throttle使用场景
// 鼠标不断点击触发，mousedown(单位时间内只触发一次)
// 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断
```

```js
//防抖
<input id="input" type="text">
var input = document.getElementById('input')
function fn(){
    console.log(input.value) 
 }
input.oninput = debounce(fn, 1000);
function debounce(fn,wait) {
    let timeout = null; // 创建一个标记用来存放定时器的返回值
    return function () {
        // 每当用户输入的时候把前一个 setTimeout clear 掉
        clearTimeout(timeout); 
        // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
        timeout = setTimeout(() => {
            fn.apply(this, arguments);
        }, wait || 500);
    };
}
//如果是立即执行

// 应用场景: search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
// window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
```

```html
函数防抖：
将多次操作合并为一次操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

函数节流：使得一定时间内只触发一次函数。原理是通过判断是否有延迟调用函数未执行
```

```js
//Object.assign和Object.create相关
let obj = Object.assign(targetObj, …sourceObj)
作用：将一个或多个源对象自身的可枚举属性与目标对象的属性合并
返回值：合并后的目标对象

let obj = Object.create(protoObj, [propertiesObj])
作用：创建新对象，在创建新对象的同时定义其原型对象(protoObj)以及一些新的属性(propertiesObj，新属性构成的对象，可选)
返回值：创建的新对象
```

```js
//介绍事件循环（宏任务微任务，要知道执行顺序）
event loop：事件循环是js的执行机制，也是js实现异步的一种方法

广义上将 JavaScript 所有任务可以分成两种，一种是同步任务，另一种是异步任务，
执行的运行机制如下（同步执行也是如此，因为它可以被视为没有异步任务的异步执行）：
1.所有同步任务都在主线程上执行，形成一个"执行栈"（execution context stack）；
2.主线程之外，还存在一个"任务队列"（task queue).只要异步任务有了运行结果就在"任务队列"之中放置一个事件
3.一旦"执行栈"中的所有同步任务执行完毕，系统就会取出"任务队列"中事件所对应的回调函数进入"执行栈"开始执行；
4.主线程不断重复上面的第三步。

除了广义上的定义，我们可以将任务进行更精细的定义，分为宏任务与微任务：
宏任务（macro-task）： 包括整体代码script，setTimeout，setInterval，ajax，dom操作
微任务（micro-task）： Promise
具体来说，宏任务与微任务执行的运行机制如下：
（1）首先，将"执行栈"最开始的所有同步代码(宏任务)执行完成；
（2）检查是否有微任务，如有则执行所有的微任务；
（3）取出"任务队列"中事件所对应的回调函数(宏任务)进入"执行栈"并执行完成；
（4）再检查是否有微任务，如有则执行所有的微任务；
（5）主线程不断重复上面的（3）（4）步。
```

```js
//定时器为什么不准（有可能会让你实现一个倒计时）
```

```js
//原型介绍
1.每个对象都可以有一个原型_proto_，这个原型还可以有它自己的原型，以此类推，形成一个原型链。查找特定属性的时候，我们先去这个对象里去找，如果没有的话就去它的原型对象里面去，如果还是没有的话再去向原型对象的原型对象里去寻找...... 这个操作被委托在整个原型链上，这个就是我们说的原型链了。
2.①、__proto__ 是原型链查询中实际用到的，它总是指向 prototype；  
  ②prototype 是函数所独有的，在定义构造函数时自动创建，它总是被 __proto__ 所指
  **总结**
所有对象都有__proto__属性，函数这个特殊对象除了具有__proto__属性，还有特有的原型属性prototype。prototype对象默认有两个属性，constructor属性和__proto__属性。prototype属性可以给函数和对象添加可共享（继承）的方法、属性，而__proto__是查找某函数或对象的原型链方式。constructor，这个属性包含了一个指针，指回原构造函数。

//继承 
```

```js
//Proxy和Object.defineProperty
```

```js
//promise介绍（最好会写）
```

```js
//js怎么实现一个倒计时
/ 在HTML中写了一个h1标签，然后引入到js中
   var h = document.getElementsByTagName("h1")[0];

function daojiShi(storptimes) {
   var newtime = new Date() //获取当前时间
   var storptime = new Date(storptimes) //获取截止时间

var mistiming = storptime.getTime() - newtime.getTime() //   获取截止时间距离现在的毫秒差

var days = Math.floor(mistiming / 1000 / 60 / 60 / 24); //获取天数   
   var hours = Math.floor(mistiming / 1000 / 60 / 60 % 24); // 获取小时
   var minutes = Math.floor(mistiming / 1000 / 60 % 60); //获取分钟数
   var seconds = Math.floor(mistiming / 1000 % 60); //获取秒数

// 判断天、时、分、秒是不是两位数，如果是直接输出，如果不是在前边加个0;    
   days <10 ? days = "0"+days : days;    
   hours <10 ? hours = "0"+hours : hours;
   minutes <10 ? minutes = "0"+minutes : minutes;
   seconds <10 ? seconds = "0"+seconds : seconds;

// 第一种连接方法
   // var rels = days + "天" + hours + "时" + minutes + "分" + seconds + "秒";   
// 第二种连接方法
   var rels = `${days}天${hours}时${minutes}分${seconds}秒`

// 判断时间差是不是正数，就是截止时间是不是比现在的时间晚
   var mis = mistiming > 0? rels:"请输入正确的时间"
   return  mis
}

//用计时器去实现它
   setInterval(function(){
//把倒计时放在h1标签中
   h.innerHTML =  daojiShi("2019,8,5")
},1000)//时间我们设置1000毫秒，也就是1秒钟

```

使用递归处理tree组件数据

```js
const caseRoutesLists = [{
  path: '/dashborde',
  name: "dashborde",
  meta: {
    title: 'dashborde',
    icon: 'el-icon-eleme'
  },
  component: () => import('@/views/dashborde.vue')
},
{
  path: '/book',
  name: "book",
  meta: {
    title: '图书管理',
    icon: 'el-icon-goods',
  },
  children: [{
    path: '/book/create',
    name: "book/create",
    meta: {
      title: '新建图书',
      icon: 'el-icon-medal',
    },
    component: () => import('@/views/book/create.vue'),
  },
  {
    path: '/book/list',
    name: "/book/list",
    meta: {
      title: '图书列表',
      icon: 'el-icon-mic'
    },
    component: () => import('@/views/book/list.vue')
  }]
}]

//给router增加breadcrumb中的title
function getMenuRoutes(arr) {
    //把tree数据赋值给变量
  const menuMap = arr
  const getBreadcrumb = (list, father = '',fatherPath='') => {
    list.forEach((item) => {
       //获取title值，并将title值使用‘/’隔开
      const title = father + "/" + item.meta.title;
        //使用‘*’将path隔开
      const path = fatherPath + (item.component ? item.path  : '*')
      //判断是否有children，如果有，就递归children
      if (item.children && item.children.length) {
        getBreadcrumb(item.children, title,path)
      } else {
         //如果没有children，就将title和path赋值
        item.meta.breadcrumb = { name: title,path:path }
      }
    })
  }
  getBreadcrumb(arr)
  return menuMap
}
const menuRoutes = getMenuRoutes(caseRoutesLists)
```

eslint设置

```javascript
import { Button, WhiteSpace, WingBlank, List, InputItem, Toast, Picker, DatePicker, Modal } from 'antd-mobile';

格式化之后变成如下样子：

import {
    Button,
    WhiteSpace,
    WingBlank,
    List,
    InputItem,
    Toast,
    Picker,
    DatePicker,
    Modal
} from 'antd-mobile';

可以通过settings进行设置：

在vscode的配置文件中 也就是setting.json中添加一行

"beautify.config": {
    "brace_style": "collapse,preserve-inline"
 }
```

思考方法：

```js
通常可以通过对象中的key-value的形式记录数据的所有状态信息；
```

## webpack相关

```js
css-loader和style-loader的区别是什么?
css-loader是将css文件解析,style-loader是将解析好的文件引入到html文件中
```

wangyanan/前端知识点学习--杂记

简介

发行版

贡献者

近期动态

wangyanan/前端知识点学习--杂记 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

wangyanan/前端知识点学习--杂记