Vue面试题总结

1.v-show和v-if的区别?

1. 当条件改变的时候v-if是通过DOM节点的添加和删除来控制节点的显示隐藏，v-show是通过css样式来控制节点的显示隐藏
2. v-if的切换成本比较高，v-show的渲染成本比较高，所以当切换的频繁的时候建议使用v-show，
   如果是初次渲染数据比较多时，建议使用v-if

2.vue中key的作用是?

在Vue中，key是一个特殊的属性，用于给每个节点（组件）设置唯一的标识符。它在Vue的虚拟DOM的渲染和更新过程中发挥重要作用，主要有以下两个方面的作用：

1. 提供渲染效率 当Vue在进行虚拟DOM的diff算法比较新旧节点时，如果节点具有相同的key，则Vue会认为它们是相同的节点，不会进行重新渲染，从而提高渲染效率。
2. 保持组件状态 在使用v-for指令渲染列表时，每个列表项都应该拥有唯一的key，这样可以在列表项顺序改变时，Vue可以准确地判断哪些列表项是新添加的，哪些列表项是已存在但位置改变的，哪些列表项是被删除的，从而保持组件状态的正确性。

需要注意的是，key只在其直接的子组件中起作用，如果两个组件的key相同，但它们不是直接的子组件，则Vue仍然会重新渲染它们。另外，key应该是稳定且唯一的，不应该使用随机数或索引作为key，因为这样可能会导致渲染错误。

3.vue中生命周期

创建阶段

• beforeCreate() 创建前阶段，这个时候还不能使用data中的数据
• created() 创建完成，最早可以使用data中的数据

挂载阶段

• beforeMount() 在挂载开始之前被调用，相关的render函数首次被调用
• mounted() 挂载完成，DOM节点挂载到实例上去之后调用该钩子

更新阶段

• beforeUpdate() 数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。
• updated() 数据更新完成并且DOM更新完成后调用

销毁阶段

• beforeDestroy() 实例销毁之前调用。在这一步，实例仍然完全可用。
• destroyed() 实例销毁后调用。调用后，Vue实例指示的所有东西都会解除绑定