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(本质上是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候补全局监听