vue-面试真题
一、真题整理
1. v-show 和 v-if 的区别
答案：
- v-show 通过 CSS display 控制显示和隐藏
- v-if 组件真正的渲染和销毁，而不是显示和隐藏
- 频繁切换显示状态用 v-show，否则用 v-if
2. 为何在 v-for 中使用 key
答案：
- 必须用key，且不能是 index 和 random
- diff 算法中通过 tag 和 key 来判断，是否是 sameNode
- 减少渲染次数，提升渲染性能
3. 描述 Vue 组件生命周期（父子组件）
答案：
- 单组件生命周期
- 父子组件的生命周期关系
4. Vue 组件如何通讯
答案：
- 父子组件 props 和 this.$emit
- 自定义事件 event.$on event.$off event.$emit
- vuex
5. 描述组件渲染和更新的过程
答案：
6. 双向数据绑定 v-model 的实现原理
答案：
- input 元素的 value = this.name
- 绑定 input 事件 this.name = $event.target.value
- data 更新触发 re-render
7. 对 MVVM 的理解
答案：
8. computed 有何特点
答案：
- 缓存，data 不变不会重新计算
- 提供性能
9. 为何组件的 data 必须是一个函数
答案：
- 组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的 data，类似于给每个组件实例创建一个私有的数据空间， 让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份 data，就会造成一个变了全都会变的结果
10. ajax 请求应该放在哪个生命周期
答案：
- mounted
- JS 是单线程的，ajax 异步获取数据
- 放在 mounted 之前没有用，只会让逻辑更加混乱
11. 如何将组件所有的 props 传递给子组件
答案：
- $props
<User v-bind="$props">
12. 多个组件有相同的逻辑，如何抽离
答案：
- mixin
- 以及 mixin 的一些缺点
13. 何时要使用异步组件
答案：
- 加载大组件
- 路由异步加载
14. 何时需要使用 keep-alive
答案：
- 缓存组件，不需要重复渲染
- 如多个静态 tab 页切换
- 优化性能
15. 何时需要使用 beforeDestroy
答案：
- 解绑自定义事件 event.$off
- 清除定时器
- 解绑自定义的 DOM 事件，如 window scroll 等
16. 什么是作用域插槽
答案：
- 在父组件中调用包含插槽子组件，父组件需要获取子组件插槽的值，父子组件使用
v-slot绑定的属性，就形成了插槽作用域。
17. Vuex 中 action 和 mutation 有何区别
答案：
- action 中处理异步，mutation 原子操作
- action 可以整合多个 mutation
18. vue-router 常用的路由模式
答案：
- hash
- history
- 两者比较
19. 如何配置 vue-router 异步加载
答案：
- component: () => import('xxx')
20. 请用 vnode 描述一个 DOM 结构
答案：
json5
{
tag: 'div',
props: {
className: 'container',
id: 'div1'
},
children: [
{
tag: 'p',
children: 'vdom'
},
{
tag: 'ul',
props: {
style: 'font-size: 20px'
},
children: [
{
tag: 'li',
children: 'a'
}
]
}
]
}21. 监听 data 变化的核心 API 是什么
答案：
- Object.defineProperty
- 以及深度监听、监听数组
- 有何缺点
22. vue 如何监听数组变化
答案：
- Object.defineProperty 不能监听数组的变化
- 重新定义原型，重写 push pop 等方法，实现监听
23. 请描述响应式原理
答案：
- 监听 data 变化
- 组件渲染和更新的流程
24. diff 算法的时间复杂度
答案：
- O(n)
- 在 O(n^3) 基础上做了一些调整
25. 简述 diff 算法过程
答案：
- patch(elem, vnode) 和 patch(vnode, newVnode)
- patchVnode 和 addVnodes 和 removeVnodes
- updateChildren(key 的重要性)
26. vue 为何是异步渲染，$nextTick 何用?
答案：
- 异步渲染，以提高渲染性能
- $nextTick 在 DOM 更新完成之后，触发回调
27. vue 常见性能优化方式
答案：
- 合理使用 v-show 和 v-if
- 合理使用 computed
- v-for时加 key，以及避免和 v-if 同时使用
- 自定义事件、DOM事件及时销毁
- 合理使用异步组件
- 合理使用 keep-alive
- data 层级不要太深
- 使用 vue-loader 在开发环境做模板编译（预编译）
- webpack 层面优化
- 通用性能优化
- 图片懒加载
- 使用 SSR