学习前端面试知识（16）

computed和watch

参考文章vue

computed

计算属性，有缓存功能，底层通过dirty来判断是否重新计算，只有在依赖数据发生变化时才会重新计算，性能更好。
不能进行异步操作。
缓存属性受多个属性影响，比如购物车商品结算
函数必须要用return返回
默认第一次加载的时候开始监听

watch

没有缓存属性
能执行异步操作
适用于一对多，也就是监听的属性影响多个属性，比如搜索框搜索
不一定要用return
默认第一次加载不做监听

Vue3性能提升主要是通过几个方面体现的

参考的boss上的回答

响应式提升。
- vue2在初始化的时候，使用defineProperty调用getter和setter将data中的每个属性变为响应式对象，如果属性为对象，会递归调用defineProperty使之变成响应式对象。
- vue3使用proxy对象重写响应式，proxy可以拦截属性的访问，赋值和删除等操作，不需要初始化的时候遍历所有属性，有多层属性嵌套的话只有访问某个属性的时候才会递归处理下一级。
- 优势：可以监听动态新增的属性，监听删除的属性，监听数组的索引和length属性
编译优化
- vue2通过标记静态根节点，优化diff算法，vue3标记和提升所有静态根节点，diff的时候只比较动态节点内容
- 静态提升。当使用hoistStatic时，所有静态的节点都被提升到render方法之外，只会在应用启动的时候创建一次，之后的使用只需要应用提取的静态节点，随着每次的渲染不停的复用
- patch flag。在动态标签末尾加上相应的标记，只能带patchFlag的节点才能被认为是动态的元素，会被追踪属性的修改，能快速找到动态节点而不用逐层遍历，提高细腻dom diff的性能
- 缓存事件处理函数cacheHandler。避免每次触发都要重新生成全新的function去更新之前的函数，减少不必要的代码量
Composition Api和Vue2使用的Option Api区别
- composition Api
  - 包含一个描述组件选项（data，methods，props等）的对象options
  - 使用mixin重用公用代码，有命名冲突，数据来源不清晰等问题
- Option Api
  - vue3中新增的一组api，基于函数，更灵活，解决options api在大型项目中不好拆分和重用的问题

vue3响应式系统的实现原理

reactive
- 设置对象为响应式对象，接收一个参数，判断参数是否是对象，不是对象直接返回这个参数，不做响应式处理，是的话创建拦截器handerler，设置get/set/deleteproperty
- get 收集依赖（track），如果当前key的值是对象，则为当前key的对象创建拦截器handler，不是对象就返回当前key的值
- set 设置的新值和老值不相等时更新为新值，并触发更新（trigger）。当前对象有这个key的时候删除这个key并触发更新trigger
effect
- 接收一个函数作为参数
- 访问响应式对象属性时收集相关的依赖
track
- 接收两个参数target和key
- 如果没有 activeEffect，则说明没有创建 effect 依赖
- 如果有 activeEffect，则去判断 WeakMap 集合中是否有 target 属性
- WeakMap 集合中没有 target 属性，则 set(target, (depsMap = new Map()))
- WeakMap 集合中有 target 属性，则判断 target 属性的 map 值的 depsMap 中是否有 key 属性
- depsMap 中没有 key 属性，则 set(key, (dep = new Set())) －depsMap 中有 key 属性，则添加这个 activeEffect
trigger
- 判断WeakMap中是否有target属性，weakMap中有target属性，则判断target属性的map值中是否有key属性，有的话循环触发收集的effect

js是单线程的，为什么能有异步任务？

boss看到个通俗易懂的回答，记录一下。

把JS认为是项目经理，然后开始安排任务：
- 1. http这个员工去帮我请求个网页，url 告诉你了，干完告诉我一声
- 1. fs 这个员工去帮我读取个文件，path告诉你了，干完告诉我一声
- 于是 http fs 等底层员工会用自己进程或者线程去做这些任务。等这俩真正干活做完后，给 JS 说一声我干完了，这个时候项目经理如果有时间，就会把你的劳动成果传达给下一个人，如果没时间就先排着。
- 说白了，让项目经理直接干这些事也是可以的，就是干的慢一点，但是如果只做调度，就会充分发挥其他小伙伴的价值。
术语回答：运行JS的容器是单线程，在同一刻，不可能同时跑两个while循环，但是可以调度其他线程或者进程模块执行任务。JS主要干的事情都是注册事件或者简单的任务，擅长IO密集型任务，不擅长CPU密集型任务。

axios常用的请求方式

get获取数据
post提交数据（表单提交，文件上传）
put更新数据（所有数据推送到后端）
patch更新数据（只将修改的数据推送到后端）
delete删除数据
用的比较多的就get和post