vue常见面试题

vue中computed和watch有什么区别

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

vue有几种通讯方式

  • props和$emit
  • 自定义事件($event在vue2.0和vue3.0写法不一致)vue3.0自定义事件传递通讯
  • a t t r s (本质上是 p r o p s 和 attrs(本质上是props和 attrs(本质上是propsemit的候补,适用于父子组件,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候补全局监听
  • 56
    点赞
  • 59
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值