Vue面试常考题总结——持续更新

Vue面试常考题

常规篇

对MVVM的理解

• MVVM的数据驱动视图则可以专注于业务逻辑和数据的开发，利用双向数据绑定去更新视图。
• Model-View-ViewModel 的缩写，Model代表数据模型，View代表 UI 组件，ViewModel 将Model 和View 关联起来。
• 数据会绑定到ViewModel 层并自动将数据渲染到页面中，视图变化的时候会通知ViewModel层更新数据。

SPA单页面的优缺点

• 含义
  • SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。
• 优点
  • 用户体验好，快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染
  • 基于上面一点，SPA相对对服务器压力较小
  • 前后端职责分明，架构清晰，前端进行交互逻辑，后端负责数据处理
• 缺点
  • 初次加载耗时多：为实现单页面应用功能及显示效果，需要在加载页面的时候将JavaScript，CSS，HTML统一加载，部分页面按需加载
  • 前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；
  • SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

v-show 和 v-if的区别

• v-if按照条件是否渲染，v-show是display的block或none；
• v-show页面加载的时候也会随之加载，不会重新销毁和渲染；
• v-if只有在判断符合的时候才会加载，不符合的时候会销毁，下一次需要重新加载渲染。
• 需要频繁切换的时候使用v-show比较好，反之使用v-if。

为什么 v-for 和 v-if 不建议用在一起

当 v-for 和 v-if 处于同一个节点时，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。如果要遍历的数组很大，而真正要展示的数据很少时，这将造成很大的性能浪费
这种场景建议使用 computed，先对数据进行过滤

为何在v-for中使用key

• key的作用主要是为了高效的更新虚拟DOM。
• diff算法中通过tag和key来判断，是否是sameNode
• 减少渲染次数，提升渲染性能
• 当 Vue.js 用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

为什么不建议用index作为key

因为和没写基本上没区别，因为不管你数组的顺序怎么颠倒，index 都是 0, 1, 2 这样排列，导致 Vue 会复用错误的旧子节点，做很多额外的工作

生命周期

生命周期函数：

• beforeCreat, created
• beforeMount, mounted
• beforeUpdate, updated
• beforeDestroy, destroyed
  生命周期各个阶段发生了什么

什么阶段才能访问操作DOM：
mounted阶段，这个时候vue才将编译好的模板挂载到页面之上

接口请求一般放在哪个生命周期中：
created、beforeMount、mounted都可以，因为在这三个钩子函数中，data已经创建，可以将服务端端返回的数据进行赋值。
但是推荐在created钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：

• 能更快获取到服务端数据，减少页面loading 时间（貌似和在mounted没区别）；
• ssr不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性；

描述Vue组件生命周期(父子组件)：
页面创建：

1. 父组件先创建
2. 然后等到子组件创建和挂载完成
3. 父组件才挂载完成

数据更新：

1. 父组件先更新数据
2. 然后等到子组件更新完成了
3. 父组件才会执行updated

何时需要使用beforeDestory：

• 解绑自定义事件event.$off，防止内存泄漏
• 清楚定时器
• 解绑自定义的DOM时间，例如window scroll等

组件通讯（常用）

• 父子组件props/this.$emit
• 自定义事件event.$on/e$