面试重点 - vue真题演练

v-show和v-if的区别

• v-show通过CSS display控制显示和隐藏
• v-if组件真正的渲染和销毁,而不是显示和隐藏
• 频繁切换显示状态用v-show,否则用v-if

为何在v-for中用key

• 必须用key,且不能时index和random
• diff算法中通过tag和key来判断,是否是sameNode
• 减少渲染次数,提升渲染性能

描述Vue组件生命周期(父子组件)

• 单组件生命周期图
• 父子组件生命周期关系

* Vue组件如何通讯

• 父子组件props和this.$emit
• 自定义事件event.$no event.$off event.$emit
• vuex

描述组件渲染和更新的过程

双向数据绑定v-model的实现原理

• input元素的value=this.name
• 绑定input事件this.name=$event.target.value
• data更新触发re-render

对MVVM的理解

computed有何特点

• 缓存,data不变不会重新计算
• 提高性能

为何组件data必须是个函数?

因为,vue其实是个class,如何不是函数的话每个组件的数据都共享了

ajax请求应放在那个生命周期

• mounted
• JS是单线程,ajax异步获取数据
• 放mounted之前没用,只会让逻辑更加混乱

如何将组件所有props传递给子组件

• $props
• <User v-bind="$props"/>

如何自己实现 v-model

多个组件有相同逻辑,如何抽离

• mixin

何时要使用异步组件

• 加载大组件
• 路由异步加载

何时使用keep-alive

• 缓存组件,不需重复渲染
• 如多个静态tab页的切换
• 优化性能

何时用deforeDestory

• 接触自定义事件event.$off
• 清除定时器
• 解绑自定义的DOM事件,如window scroll等

什么是作用域插槽

Vuex中action和mutation有何区别

• action中处理异步,mutation不可以
• mutation做原子操作
• action可以整合多个mutation

Vue-router常用的路由模式

• hash默认
• H5 history(需要服务端支持)
• 两者比较

如何配置Vue-router异步加载

用vnode描述一个DOM结构

监听data变化的核心API是什么

• Object.defineProperty
• 以及深度监听,监听数组
• 有何缺点

Vue如何监听数组变化

• Object.defineProperty不能监听数组变化
• 重新定义原型,重写push pop等方法,实现监听
• Proxy可原生支持监听数组变化

描述响应式原理

• 监听data变化
• 组件渲染和更新的流程

diff算法的时间复杂度

 

• O(n)
• 在O(n^3)基础上做一些调整

简述diff算法过程

• patch(elem,vnode)和patch(vnode,newVnode)
• patchVnode和addVnodes和removeVnodes
• updataChildren(key重要性)

Vue为何是异步渲染,$nextTick何用?

• 异步渲染(以及合并data修改),以提高渲染性能
• $nextTick在DOM更新完之后,触发回调

Vue常见性能优化方式

• 合理使用v-show和v-if
• 合理使用computed
• v-for时加key,以及避免和v-if同时使用
• 自定义事件,DOM事件及时销毁
• 合理使用异步组件
• 合理使用keep-alive
• data层级不要太深
• 使用vue-loader在开发环境做模板编译(预编译)
• webpack层面的优化
• 前端通用性能优化,如图片懒加载
• 使用SSR

Vue 3

• 全部用TS重写(响应式,vdom,模板编译等)
• 性能提升,代码量减少
• 调整部分API