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

axios常用的请求方式

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