2023面试题目总结

项目遇到的问题难点？

老项目版本过低(angular4),相关框架太少，需要升级成新框架。
1.single-spa
2.qiankun
3.iframe

样式环境隔离/js隔离/公共依赖的加载

JS

原型，原型链，new

原型是存放公共属性地方，所有实例都能访问到这些属性
实例的__proto__指向构造函数的prototype，这就是原型链
new 是个语法糖，new Pro() 首先创建了一个空对象obj;obj的__proto__指向构造函数的原型；obj成为this的上下文；如果函数没有返回对象则返回this

事件循环机制（宏任务、微任务）

js任务分同步任务和异步任务，同步任务在执行栈执行，一旦遇到异步任务就会将异步任务交给一步模块处理，然后继续执行同步任务。当异步任务有了结果之后，就会在队列里面放一个事件。执行栈执行同步任务完成后，就会读取这个队列，去除队列中的异步任务压入执行栈执行。
队列中任务分为宏任务和微任务。宏任务包括从队列中获取任务的回调以及放入执行栈中执行。微任务是宏任务执行完成后立即执行的任务。

异步编程

Generator

this的指向

1. 严格模式无显示绑定this指向window
2. 非严格模式

普通函数 this指向调用函数环境，无明确调用环境时只想window
new 指向实例
call,apply,bind
箭头函数

事件模型

冒泡和捕获，默认是冒泡

防抖和节流

addEventListener

数组常用方法

不改变原数组
map/filter/foreach/every/some/find/findindex/join/reduce/slice/concat
改变原数组
push/pop/shift/unshift/revese/sort/splice

数组去重

1.Arrary.form(new Set(arr))
2.filter && indexOf
3.Map
4.loadsh.uniqWith + loadsh.isEqual

数组排序

1.sort
2.冒泡排序
3.快速排序
4.loadsh.sortBy

数据类型的判断方法

isArray
typeof
instanceof
prototype.toString.call()
constructor

loadash：
isUndefined
isNull
isNil

TS

interface 和 type的区别

interface 只能描述对象,不能描述原始类型
type 既可以描述对象也能描述原始类型
type 可以动态计算属性
interface 可以重名，重名的会进行合并。type 不能重名
继承方式：
interface extends;
type 使用 &

总结： type 功能比interface强大；优先使用interface

vue

vue2和vue3 的区别

1.编译阶段

diff 算法优化
一个组件实例对应一个watcher,用到的属性都会标记依赖，属性改变时回通知watcher,关联的组件都会被更新。vue2 更新时会遍历所有的静态节点和动态节点；vue3 在编译阶段做出了优化。

1. diff算法优化
2. 增加静态标记，数据更新比较时跳过静态标记的节点
3. 静态提升，被静态标记的节点只会被创建一次，后面在重新渲染时直接复用,
4. 事件监听缓存,事件监听被视为动态节点绑定，开启了事件缓存，diff时直接使用缓存
5. ssr优化-静态内容到达一定量级时会用createStaticVNode在客户端生成一个 static node 然后直接innerHtml

2.源码体积
vue3 源码体积更小,移除了一些不常用的api,同时降低内部模块的耦合性，在tree shanking时，任何一个依赖如ref、reavtived、computed仅仅在使用时会被打包

3.响应式系统
defineProperty
proxy
直接监听整个对象，不需要递归的去监听每个属性。可以监听添加删除和数组

组件的通信

props
emits
expose && ref
v-model
provide && inject
pinia
vuex
eventsbus
slot

CSS

盒子模型

box-sizing:
标准盒模型：content-box width = content
IE盒模型：border-box width = content + padding + border

BFC

块级格式化上下文

如何创建BFC

1. float的值不是none。
2. position的值不是static或者relative。
3. display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4. overflow的值不是visible

BFC 布局规则

1. BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列
2. BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
3. 垂直方向的距离由margin决定， 属于同一个BFC的两个相邻的标签外边距会发生重叠
4. 计算BFC的高度时，浮动元素也参与计算

BFC 解决的问题

1. Float 高度塌陷
2. Margin 边距重叠