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 边距重叠
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值