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 组件如何通讯

  • 父子组件 props 和 this.$emit

  • 自定义事件 event.$on event.$off event.$emit

  • vuex

    4.双向数据 v-model 的实现原理

  • input 元素的 value=this.name

  • 绑定 input 事件 this.name=$event.target.value

  • data 更新触发 re-render

    5. computed 有何特点

  • 缓存， data 不变不会重新计算

  • 提高性能

    6. ajax 请求应该放在哪个生命周期

  • mounted

  • JS 是单线程的， ajax 异步获取数据

  • 放在 mounted之前没有用，只会让逻辑更加混乱

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

  • $props

  • 细节知识点，优先级不高

    8.何时要使用异步组件？

  • 加载大组件

  • 路由异步加载

    9.何时需要使用 keep-alive ?

  • 缓存组件，不需要重复渲染

  • 如多个静态 tab 页的切换

  • 优化性能

    10.何时需要使用 beforeDestory

  • 解绑自定义事件 event.$off

  • 清楚定时器

  • 解绑自定义的 DOM 事件，如 window scroll 等

    11. Vuex 中 action 和 mutation 有何区别

  • action 中处理异步，mutation 不可以

  • mutation 做原子操作

  • action 可以整合多个 mutation

    12. Vue 如何监听数组变化

  • Object.defineProperty 不能监听数组变化

  • 重新定义原型，重写 push pop 等方法，实现监听

  • Proxy 可以原生支持监听数组变化

    13.简述 diff 算法过程

  • path(elem,vnode) 和 patch(vnode,newVnode)

  • patchVnode 和 addVnodes 和 removeVnodes

  • updateChildren (key的重要性)

    14. Vue 为何是异步渲染， $nextTick 何用？

  • 异步渲染（以及合并data修改），以提高渲染性能

  • $nextTick 在DOM 更新完之后，触发回调

    15.Vue 常见性能优化方式

  • 合理使用 v-show 和 v-if

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