v-if/v-show

v-show在浏览器中元素增加display:none，v-if直接不渲染DOM元素
更新不频繁，用v-if
需要切换隐藏显示的，用v-show

keep-alive和v-show有什么区别？

控制层级不一样：keep-alive是vue层面，v-show只是css控制隐藏和显示
使用场景：tab切换可以用keep-alive

在beforeDestory里做哪些事情？

  1. 解绑自定义事件event.$off([eventName])
  2. 解绑自定义DOM事件监听document.removeEventListener
  3. 取消socket消息订阅
  4. 删除localStorage.removeItem数据
  5. 销毁定时任务setTimeout，setInterval
  6. 官方：解除绑定，销毁子组件，销毁事件监听器

组件化

使用小型/独立/通常可复用的组件构建大型项目
优点：

  • 不同组件可复用，减少重复代码
  • 增加团队协作，不同人负责不同的组件，提高效率
  • 利于迭代和项目维护

MVVM的理解

view：dom
viewmodel：vue（dom lsiteners，directives）
model：js对象
MVVM：数据驱动视图

请求应该放在组件哪个生命周期里？

放在mounted里

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

  • $props
  • v-bind=”$props”

多个组件有相同的逻辑，如何抽离？

  • mixins
  • mixins有哪些缺点
    • 无法知道变量的来源
    • 变量可能会冲突

什么时候需要用到异步组件？

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

何时需要 keep-alive？

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

什么是作用域插槽？

当父组件需要用到子组件定义的对象时，可以使用

vuex 中的 mutation 和 action 有什么区别？

  • action 处理异步，mutation 不能
  • mutation 时做原子操作（每次做一个操作）
  • action 可以整合多个 mutation

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

  • Object.defineProperty
  • 深度监听，和数组监听

vue如何监听数组的变化？

  • vue中Object.defineProperty不能监听数组的变化
  • 重新定义原型，重写push，pop等方法
  • proxy原生支持监听数组的变化

响应式原理

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

diff算法的时间复杂度

  • O(n)
  • 在O(n^3)上做了优化

diff算法的过程

  • patch(elem, vnode) 和 patch(newVnode, vnode)
  • patchVnode 和 addVnodes，removeVnodes
  • updateChildren（key的重要性）

vue 为何是异步渲染的，$nextTick 的作用

  • 提高渲染性能，合并data修改，一次渲染
  • $nextTick是DOM更新之后，触发回调

vue性能优化

  • 合理使用v-if和v-show
  • 合理使用computed
  • v-for加key，避免和v-if同时使用（v-for更高一级）
  • 自定义事件和DOM事件及时销毁
  • 合理使用异步组件
  • 合理使用keep-alive
  • data层级不要太深
  • vue-loader预编译
  • vue3 是在 getter 中去递归响应式，访问到内部对象的时候才会变成响应式
  • webpack层级优化
  • 前端通用的性能优化
  • 使用SSR