「2022」打算跳槽涨薪，必问面试题及答案——VUE篇

1、为什么选择VUE，解决了什么问题？

vue.js 正如官网所说的，是一套构建用户界面的渐进式框架。与其它重量级框架不同的是，vue 被设计为可以自底向上逐层应用。vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另外一方面，当与现代化工具链以及各种支持类库结合使用时，vue 也完全能够为复杂的单页应用提供驱动。

vue.js 有声明式，响应式的数据绑定，组件化开发，并且还使用虚拟 DOM 等技术，统一编程规范和模块等，将项目功能模块化更方便组织和构建复杂应用，便于项目的扩展和维护。vue 框架维护及时，且 Vue 3 将在2022 年 2 月 7 日成为新的默认版本。

2、如果加入 keep-alive，第一次进入组件会执行哪些生命周期函数？

会执行的钩子函数以及它们的顺序分别为：

beforeCreat、created、beforeMount、mounted、activated

3、key 的作用和工作原理。

key 的作用主要是为了高效地更新虚拟 DOM，其原理是 vue 中在 patch 过程中，通过 key 可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个 patch 过程更加高效，减少 DOM 操作量，提高性能。

另外，若不设置 key 还可能在列表更新时，引发一些隐蔽的 bug 。vue 在使用相同标签名元素的过滤或切换时，也会使用到 key 属性，其目的也是为了让 vue 可以区分它们，否则 vue 只会替换其内部属性而不会触发过滤效果。

4、v-if 和 v-for 的优先级哪个高？

v-for 的优先级更高。

如果 v-if 和 v-for 同时出现，每次渲染都会先执行循环，再判断条件，无论如何循环都不可避免，浪费了性能。

情景一：每次遍历时，都需要执行 v-if 解析一次，浪费性能。

  

    {
  { user.name }}
  

要避免出现这种情况，则在外层嵌套 template ，在这一层进行 v-if 判断，然后再内部进行 v-for 循环。可以改为：