项目遇到的问题难点?
老项目版本过低(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的指向
- 严格模式无显示绑定this指向window
- 非严格模式
普通函数 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 在编译阶段做出了优化。
- diff算法优化
- 增加静态标记,数据更新比较时跳过静态标记的节点
- 静态提升,被静态标记的节点只会被创建一次,后面在重新渲染时直接复用,
- 事件监听缓存,事件监听被视为动态节点绑定,开启了事件缓存,diff时直接使用缓存
- 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
- float的值不是none。
- position的值不是static或者relative。
- display的值是inline-block、table-cell、flex、table-caption或者inline-flex
- overflow的值不是visible
BFC 布局规则
- BFC就是一个块级元素,块级元素会在垂直方向一个接一个的排列
- BFC就是页面中的一个隔离的独立容器,容器里的标签不会影响到外部标签
- 垂直方向的距离由margin决定, 属于同一个BFC的两个相邻的标签外边距会发生重叠
- 计算BFC的高度时,浮动元素也参与计算
BFC 解决的问题
- Float 高度塌陷
- Margin 边距重叠