1.v-show和v-if的区别
- v-show 通过CSS display 控制显示和隐藏
- v-if 组件真正的渲染和销毁,而不是显示和隐藏
-
2.为何在 v-for 中用 key
必须用 key ,而且不能是 index 和 random
- diff 算法中通过 tag 和 key 来判断,是否是sameNode
-
3. Vue 组件如何通讯
父子组件 props 和 this.$emit
- 自定义事件 event.$on event.$off event.$emit
-
4.双向数据 v-model 的实现原理
input 元素的 value=this.name
- 绑定 input 事件 this.name=$event.target.value
-
5. computed 有何特点
缓存, data 不变不会重新计算
-
6. ajax 请求应该放在哪个生命周期
mounted
- JS 是单线程的, ajax 异步获取数据
-
7.如何将组件所有 props 传递给子组件?
$props
-
8.何时要使用异步组件?
加载大组件
-
9.何时需要使用 keep-alive ?
缓存组件,不需要重复渲染
- 如多个静态 tab 页的切换
-
10.何时需要使用 beforeDestory
解绑自定义事件 event.$off
- 清楚定时器
解绑自定义的 DOM 事件,如 window scroll 等
11. Vuex 中 action 和 mutation 有何区别
action 中处理异步,mutation 不可以
- mutation 做原子操作
-
12. Vue 如何监听数组变化
Object.defineProperty 不能监听数组变化
- 重新定义原型,重写 push pop 等方法,实现监听
-
13.简述 diff 算法过程
path(elem,vnode) 和 patch(vnode,newVnode)
- patchVnode 和 addVnodes 和 removeVnodes
-
14. Vue 为何是异步渲染, $nextTick 何用?
异步渲染(以及合并data修改),以提高渲染性能
-
15.Vue 常见性能优化方式
合理使用 v-show 和 v-if
- 合理使用 computed
- v-for 时加 key ,以及避免和 v-if 同时使用
- 自定义事件、 DOM 事件及时销毁
- 合理使用异步组件
- 合理使用 keep-alive
- data 层级不要太深
- 使用 vue-loader 在开发环境做模板编译(预编译)
- 前端通用的性能优化,如图片懒加载
- 使用 SSR