1. v-show和v-if的区别
- v-show通过css display控制显示和隐藏
- v-if组件根据data判断组件是否渲染，是组件真正的渲染和销毁，而不是显示和隐藏
- 频繁切换显示状态，使用v-show，否则用v-if
2. 为何在v-for中使用key
- 必须用key,且不能是index和random
- diff算法中通过tag和key来判断，是否是sameNode
- 减少渲染次数，提高渲染性能
3. vue生命周期; 父子组件生命周期顺序
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
4. vue组件如何通信
- 父子组件 props和 $emit
- 自定义组件 event.off、event.$emit
- vuex
5. 描述vue组件渲染和更新的过程
- 模板编译--render函数--生成vNode--
- 数据响应式--监听数据变化-- data更新--重新执行render函数 --生成vNode
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是函数，每次实例，都在一个闭包中，不会被覆盖
10. ajax请求放在哪个生命周期
- mounted中
- js是单线程，ajax异步获取数据
- 放在mounted之前没有用，会让逻辑更混乱
11. 如何将组件所有props传递给子组件
- $props
<Info v-bind='$props'/>
12. 如何自己实现一个v-model
13. 多个组件相同逻辑，如何抽离？
mixin mixin有一些缺点
14. 何时使用异步组件？
- 加载大组件：图表
- 异步路由
- 能优化性能
15. 何时使用keep-alive?
- 缓存组件，不需要重复渲染
- 如多个静态tab页切换
- 能优化性能
16. 何时需要使用beforeDestroy
- 解除自定义事件 event.$off
- 清除定时器
- 解绑自定义的DOM事件，如window, scroll等
- 优化性能，防止内存泄漏，程序卡死
17. 作用域插槽
- slot 传值
18. vuex中的action和mutation的区别？
- action中处理异步操作， mutation不可以
- mutation做原子操作
- action可以整合多个mutation操作
19. vue-router常用路由模式
- hash
- h5 History需要服务端支持
20. 如何配置vue-router异步加载
- import异步组件方式
- patch
- component
21. 请用vnode描述一个DOM结构
{
tag:'div',
props:{
className:''
},
children:[]
}
22. 监听data变化的核心API
- Object.defineProperty
- 深度监听、监听数组
- 缺点
23. vue如何监听数组变化
- Object.defineProperty不能监听数组变化
- 重新定义数组原型，重写push、pop等方法，实现监听
- Proxy可以原生支持监听数组的变化
24. 请描述响应式原理（组件渲染、更新过程）
- 监听data变化的过程
- 组件渲染和更新流程
25. diff算法复杂度（On）
- 在O的n^3基础上做了优化调整
- 同层级进行对比，tag不相同进行销毁重建
25. 简述diff算法过程
- patch(elem,vnode) 和 path(vnode, newVnode)
- patchVnode 和 addVnodes 和 removeVnodes
- updateChildren (key的重要性)
26. vue为何是异步渲染？$nextTick有何作用？
- 异步渲染（合并data修改），以提高渲染性能
- $nextTick在DOM更新完成后，触发回调
27. vue常见性能优化方式？
- 合理使用v-show和v-if
- 合理使用computed
- v-for中加key,避免使用v-if
- 自定义事件，DOM事件及时销毁
- 合理使用keep-alive
- 合理使用异步组件
- data层级不要太深
- v-loader预编译
- webpack层面优化
- 通用的优化--图片懒加载、DNS
- 使用SSR
