2022年3月21日复盘

1.JS变量的类型？怎么判断？

• 类型：
  • 基本类型：null，undefined，number，string，boolean，symbol，bigint
  • 引用类型：object，array，function，map，set（date，regexp）
• 判断类型
  • typeof：基本类型除了null都能够显示正确的，function也能显示
  • instanceof：从原型链上查找
  • Object.prototype.toString()方法

2.JS数组常用方法？能够插入数据的？能够删除数据的？去重方法？

• 闭包：有权访问另一个函数作用域中的变量的函数
• 数组方法：
  • 插入数据：push，unshift，splice
  • 删除数据：pop，shift，splice
• 去重
  • set对象
  • 利用循环find，indexof等判断是否存在

3.JS闭包了解吗？作用域，作用域链知道吗？更改this指向？new的操作过程？

• 闭包：有权访问另一个函数作用域中的变量的函数

• 作用域：一个变量的执行环境，定义了变量或函数的行为

• 作用域链：代码在一个环境中执行时，会创建一个变量对象的作用域链，保证对执行环境的有权访问的所有变量和函数的有序访问

• this：this对象是运行时基于函数的执行环境绑定的

• 更改this指向：

  • this指向函数的直接调用者
  • new构造函数改变指向：新建一个空对象，空对象的__proto__等于构造函数的prototype，使用构造函数和参数初始化一个对象，将初始化的对象复制给新建的空对象，然后返回这个对象。
  • call、apply、bind

4.原型和原型链了解吗？实例对象，原型和构造函数之间的关系？

• 继承的实质：原型和原型链是js实现继承的，让对象拓展
• 实例，原型和构造函数的关系
  • 实例.__proto__ = 原型
  • 原型.constructor = 构造函数
  • 构造函数.prototype = 原型

5.事件循环过程？循环一次执行几个微任务几个宏任务？微任务宏任务有哪些？

• 事件循环过程：基于JS的单线程，执行完同步任务后，执行异步任务，异步任务分为宏任务和微任务，执行任务中先执行微任务，再去执行宏任务，执行过程过程中也不断有新的任务来，会添加到对应任务队列的尾部，这一过程不断循环，称之为事件循环。
  • 宏任务：常见的定时器，IO任务
  • 微任务：promise.then ，async
• js事件循环每次读取一个任务，然后执行这个任务，执行完再去获取下一个任务（循环一次只执行一个任务）

6.promise也是微任务吗？promise有哪几个状态？promise的api有哪些？

• promise内部代码并不是微任务而是同步任务，.then函数的回调才是微任务
• 状态：等待状态pending、成功状态fulfilled，失败状态rejected；状态只能更改一次
• promiseAPI：
  • then
  • catch
  • all：全都成功则为成功，否是失败
  • race：一个成功就是成功
  • finally：无论怎么都会执行

7.then接受什么参数？then函数返回什么？返回的promise和刚刚的promise有什么区别？

• then接收成功和失败的回调函数
• then返回一个新的promise
• 刚刚的promise状态已经变更了，而then返回的promise是一个new出来的新的promise对象

8.all是什么意思？怎么实现的？他的then怎么实现的？

• all指的是promise数组中全部执行成功，all函数才会执行成功回调，否则就是失败的
• 成功一个promise就从promise数组中出来，最后面到数组长度为0则是成功的回调，否则是失败
• then也是返回一个新的promise对象，该promise内部循环调用promise数组中的回调来计数当前剩余，来判断当前是否执行resolve方法

9.v-model是什么？

• v-model是一个语法糖，v-bind和@事件

10.响应式数据原理？只要存在一个指令或者模板语法就需要一个watcher吗？

• vue1.0：Observer（Object.definePrototy）、watcher、compiler（存在就有一个watcher）
• vue2.0：Observer（Object.definePrototy）、dep、watcher、compiler（dep数组存储watcher）
• vue3.0：reactive（proxy）、dep（set存储，不会存在重复的wachter）

11. v-for和v-if的关系？怎么解决？不使用你说的方法还能怎么解决？

• v-for在v-if之前执行，所以使用遍历的数组中的对象信息判断是不可取的（不必要的性能开销）
• 解决方案：在v-for内部使用template标签进行v-if判断
• 另一种：使用computed返回一个数组对象来进行判断

12.组件的通讯方式？修饰符.sync?

• 组件通讯方式：props/emits, $parent/$children, eventBus, vux, provide/inject, $refs获取dom，**$attrs**, $listeners

• .sync：对父子传值间的限制，通过.sync的修饰，让子组件不能更改父组件传入的prop中对应的属性，保证父子组件的单向数据流

  • 注意点：
    • 使用sync的时候，子组件传递的事件必须为update:value，value为父组件中对应被修饰传进来的prop属性名
    • 带有.sync修饰符的属性不能和表达式使用，要赋值的值只能是想要绑定的属性名

13.组件生命周期

生命周期：beforeCreate，created，beforeMounted，beforeUpdate，updated，beforeDestroy，distroyed

14.$attrs和$listeners是什么？和props有什么区别？

• $attrs: 从父组件传给自定义子组件的属性，如果没有prop接收，会自动设置到子组件内部的最外层标签上，如果是class和style的会，会合并标签的这两个属性；也可以设置到指定的标签上，就不会存在最外层标签上。

  • 通过inheritAttrs属性：设置为false时，能够将绑定到子组件上却子组件中没有定义的prop属性能够挂载到$attrs上，让它们能够生效，并且可以通过 v-bind显性绑定在非根元素上。

• $listeners: 包含了父作用域中的 (不含 `.native` 修饰器的) `v-on` 事件监听器。它可以通过 `v-on="$listeners"` 传入内部组件——在创建更高层次的组件时非常有用。

   <input
          type="text"
          v-bind="$attrs"
          class="form-control"
  +       v-on="$listeners"
  -       @focus="$emit('focus', $event)"
  -       @input="$emit('input', $event)"
      />
  

15. webpack会吗？怎么用的？less文件怎么解析？

webpack是静态资源打包工具，通过不同的loader和plugins插件进行配置解析对应的文件

• less文件解析：需要style-loader、css-loader和less-loader，在use属性中loader数组加载顺序是逆序的

16. style-loader和css-loader的区别？

• style-loader：为了在html中以style的方式嵌入css
• css-loader：在js文件中通过require的方式来引入css时，需要安装css-loader
• less-loader：在js中，需要require导入less文件，name我么你需要增加包-less-loader和less包