vue常见面试题

vue中computed和watch有什么区别

用途不同

• computed用于计算产生新的数据
• watch用于监听现有数据

vue有几种通讯方式

• props和$emit
• 自定义事件（$event在vue2.0和vue3.0写法不一致）vue3.0自定义事件传递通讯
• $attrs（本质上是props和$emit的候补，适用于父子组件，v-bind才是透传根本）
• $parents（适用于父子组件）
• $ref（适用于父子组件）
• provide/inject（适用于多层级组件，结合computed可以实时根据this变化）
• Vuex
  

Vuex mutation action区别

• mutation：原子操作；必须同步代码
• action：可包含多个mutation；可包含异步代码

vue每个生命周期都做了什么？

beforeCreate

• 创建一个空白的vue实例
• data method尚未被初始化，不可使用

created

• vue实例初始化完成，完成响应式绑定
• data method都已经初始化完成，可调用
• 尚未开始渲染模板

beforeMount

• 编译模板，调用render生成vdom
• 还没有开始渲染DOM

mounted

• 完成DOM渲染
• 组件创建完成
• 开始由“创建阶段”进入“运行阶段”

beforeUpdate

• data发生变化
• 准备更新DOM(尚未更新DOM)

updated

• data发生变化，且DOM更新完成
• 不要在updated中修改data，可能导致死循环

beforeUnmounted

• 组件进入销毁阶段（尚未销毁，可正常使用）
• 解除绑定一些全局事件、自定义事件

unmounted

• 组件被已经销毁
• 所有子组件也都被销毁了

keep-alive组件涉及的生命周期

• onActivated缓存组件被激活
• onDeactivated缓存组件被隐藏

vue什么时候操作DOM比较合适

• mouted和updated都不能保证子组件全部挂载完成
• 使用$nexTick渲染DOM
  

ajax应该在哪个生命周期？

有2个选择：created和mounted
推荐mounted

vue3.0 Composition API生命周期有何区别？

• 用setup代替了beforeCreate和created
• 使用hooks函数的形式，如mounted改为onMounted()
  

Vue2 Vue3 React 三者diff算法有何区别？

介绍diff算法

• diff算法很早就有
• diff算法应用很广泛，例如：github的Pull Request 中的代码diff
• 如果要严格diff两颗树，时间复杂度O(n^3),不可用

Tree diff的优化—优化后的时间复杂度在O(n)

• 只比较同一层级，不跨级比较
• tag不同则删除重建（不在比较内部细节）
• 子节点通过key来区分（key的重要性）

React diff-仅右移

vue2 - 双端比较

vue3-最长递增子序列

vue和React为何循环时必须使用key？

• vdom diff算法会根据key判断元素是否要删除？
• 匹配了key，则只移动元素-性能较好
• 未匹配key，则删除重建-性能差

Vue-router MemoryHistory（abstract）

Vue-router三种模式

• hash（通过location.hash来实现）
• WebHistory （通过H5 history API的pushSate()、onpopstate）
• MemoryHistory(Vue-router4之前叫做 abstract history )

MemoryHistory不修改 url ，路由地址在内存中，但页面刷新会重新回到首页

如何监听Vue组件报错？

window.onerror

• 全局监听所有JS错误
• 但是他是JS级别的，识别不了Vue组件的信息
• 扑捉一些Vue监听不到的错误
  
  try…catch 捕获的 error，无法被 window.onerror 监听到

errorCaptured生命周期

• 监听所有下级组件的错误
• 返回false，会阻止向上传播
  

errorHandler配置

• Vue全局错误监听，所有组件错误都会汇总到这里
• 但 errorCaptured 返回 false，不会传播到这里
  

异步错误

• errorCaptured 监听下级组件错误，返回 false 阻止向上传播
• errorHandler 监听全局 Vue 组件的错误
• window.onerror 监听其他 JS 错误，如异步
• 实际工作中，三者要结合使用
• errorCaptured 监听一些重要、有风险组件的错误
• window.onerror和errorHandler候补全局监听