vue面试笔记总结

1、v-if与v-show的区别，以及应用场景？

v-if 和 v-show 理论上都是作用于元素的显示隐藏，只是一个是直接对DOM，一个是通过CSS的 display 来操作的，在项目中大部分的时候可以使用 v-if 直接代替使用 v-show ，只有当DOM频繁进行显示和隐藏的时候用v-show。
（为什么大部分时候使用v-if：如果渲染条件是false就没有必要使用v-show让元素挂载在dom上，直接用v-if不渲染就可以。）

2、v-if与v-for能不能一起使用呢？会发生什么情况？

v-if与v-for是可以一起使用的，只是v-for的优先级大于v-if。所以当两个指令出现来一个DOM中，那么 v-for 渲染的当前列表，每一次都需要进行一次 v-if 的判断。因此当你需要进行同步指令的时候。尽量使用计算属性，先将 v-if 不需要的值先过滤掉

如果想要实现根据v-if的值来判断是否渲染v-for列表，可以将v-if放入一个template元素中并作为v-for元素的父元素，来实现。

3、说一下vue的生命周期

创建实例阶段：
beforeCreate: 初始化事件和声明周期管控（创建实例前）

应用：可以做一些是否渲染的权限校验
created： 实例创建完成（data、methods等已经挂载在实例上了）
应用：可以发送异步请求数据

编译阶段：
beforeMount： 第一次渲染DOM之前
应用：基本不做什么事，也可以在这里发送异步数据请求
mounted： 第一次渲染DOM之后：真实DOM渲染完了
应用：可以做一些DOM的处理或者监听工作

更新阶段：
beforeUpdata: 修改新的DOM之前，新数据渲染之前
应用：基本不做什么事
updated: 修改新的DOM之后，数据渲染之后
应用：可以做一些DOM的处理或者监听工作，不能做一件事：修改响应数据（这样会导致修改操作的死循环）

销毁阶段
beforeDestroy: 销毁之前
destroyed: 销毁之后

4、vue组件之间的通信方式有哪些？

父传子： props属性
子传父： vue自带的发布订阅模式        子： $emit发送        父： $on接收

组件之间（不论父子还是兄弟）： EventBus事件总线、vuex、localStorage / sessionStorage、$attrs / $listeners
祖先与后代： provide、inject
获取父组件、子组件的实例： $ ref、 $children、 $parent

5、在使用vue时有什么性能优化的方式？

开发过程：

1. 优先使用v-if
2. v-for key避免使用index作为标识
   当index作为标识的时候，插入一条数据的时候，列表中它后面的key都发生了变化，那么当前的 vFor 都会对key变化的 Element 重新渲染，但是其实它们除了插入的 Element 数据都没有发生改变，这就导致了没有必要的开销。所以，尽量不要用index作为标识，而去采用数据中的唯一值。
3. 释放组件资源
   当组件销毁后，尽量把我们开辟出来的资源块给销毁掉，比如 setInterval , addEventListener等。
4. 长列表渲染
   对于长列表渲染的时候，建议将DOM移除掉，类似于图片懒加载的模式，只有出现在视图上的DOM才是重要的DOM。网络上有一些很好的解决方案，如 vue-virtual-scroller 库等等。
5. 图片合理的优化方式
   小图标使用 SVG 或者字体图标；
   通过 base64 和 webp 的方式加载小型图片；
   能通过cdn加速的大图尽量用cdn；
   使用有懒加载加载图片；
6. 路由器按需加载
   路由懒加载的方式有两种，一种是require 另一种是 import。
7. 首屏优化
   设计一个自家公司的loading加载图标
   骨架屏