8 道高频出现的 Vue 面试题及答案

头像
夜尽天明
    阅读 6 分钟
    68

    clipboard.png

    前言

    本文讲解 8 道高频出现的 Vue 面试题及答案。

    复习前端面试的知识，是为了巩固前端的基础知识，最重要的还是平时的积累！

    注意：文章的题与题之间用下划线分隔开，答案仅供参考。

    前端硬核面试专题的完整版在此：前端硬核面试专题，包含：HTML + CSS + JS + ES6 + Webpack + Vue + React + Node + HTTPS + 数据结构与算法 + Git 。

    Vue

    对 MVC、MVP 、MVVM 的理解

    MVC 模式的意思是，软件可以分成三个部分。

    clipboard.png

    • 视图（View）：用户界面。
    • 控制器（Controller）：业务逻辑。
    • 模型（Model）：数据保存。

    各部分之间的通信方式如下。

    clipboard.png

    • View 传送指令到 Controller
    • Controller 完成业务逻辑后，要求 Model 改变状态
    • Model 将新的数据发送到 View，用户得到反馈
    • 所有通信都是单向的（逆时针）。

    MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。

    clipboard.png

    • 各部分之间的通信，都是双向的（顺时针）。
    • View 与 Model 不发生联系，都通过 Presenter 传递。
    • View 非常薄，不部署任何业务逻辑，称为 "被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。

    MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。

    clipboard.png

    唯一的区别是，它采用双向绑定（data-binding）：View 的变动，自动反映在 ViewModel，反之亦然。Angular 和 Ember 都采用这种模式。

    如何理解 Vue 是异步执行 DOM 更新的 ？

    • Vue 是异步执行 DOM 更新。
    • 只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。
    • 如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。
    • 然后，在下一个的事件循环 tick 中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MessageChannel，如果执行环境不支持，会采用 setTimeout(fn, 0) 代替。

    例如，当你设置 vm.someData = 'new value' ，该组件不会立即重新渲染。

    • 当刷新队列时，组件会在事件循环队列清空时的下一个 tick 更新。
    • 多数情况我们不需要关心这个过程，但是如果你想在 DOM 状态更新后做点什么，这就可能会有些棘手。
    • 虽然 Vue.js 通常鼓励开发人员沿着 “数据驱动” 的方式思考，避免直接接触 DOM，但是有时我们确实要这么做。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

    深入响应式原理

    如何追踪变化

    • 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转 getter/setter。
    • Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。
    • 这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式化并不同，所以你可能需要安装 vue-devtools 来获取更加友好的检查接口。
    • 每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。
    • 观察者订阅了可观察对象，当可观察对象发布事件，则就直接调度观察者的行为，所以这里观察者和可观察对象其实就产生了一个依赖的关系。

    clipboard.png

    说下对 Virtual DOM 算法的理解 ？

    包括几个步骤：

    • 1、用 JavaScript 对象结构表示 DOM 树的结构，然后用这个树构建一个真正的 DOM 树，插到文档当中；
    • 2、当状态变更的时候，重新构造一棵新的对象树，然后用新的树和旧的树进行比较，记录两棵树差异；
    • 3、把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上，视图就更新了。

    Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。可以类比 CPU 和硬盘，既然硬盘这么慢，我们就在它们之间加个缓存：既然 DOM 这么慢，我们就在它们 JS 和 DOM 之间加个缓存。CPU（JS）只操作内存（Virtual DOM），最后的时候再把变更写入硬盘（DOM）。

    比较两棵虚拟 DOM 树的差异

    比较两棵 DOM 树的差异是 Virtual DOM 算法最核心的部分，这也是所谓的 Virtual DOM 的 diff
    算法。
    两个树的完全的 diff 算法是一个时间复杂度为 O(n^3) 的问题。但是在前端当中，你很少会跨越层级地移动 DOM 元素。

    所以 Virtual DOM 只会对同一个层级的元素进行对比：

    clipboard.png

    上面的 div 只会和同一层级的 div 对比，第二层级的只会跟第二层级对比。这样算法复杂度就可以达到 O(n)。

    深度优先遍历，记录差异

    在实际的代码中，会对新旧两棵树进行一个深度优先的遍历，这样每个节点都会有一个唯一的标记：

    clipboard.png

    在深度优先遍历的时候，每遍历到一个节点就把该节点和新的的树进行对比。如果有差异的话就记录到一个对象里面。

    Virtual DOM 算法主要是实现上面步骤的三个函数：element，diff，patch。然后就可以实际的进行使用：

    // 1. 构建虚拟 DOM
var tree = el('div', {'id': 'container'}, [
    el('h1', {style: 'color: blue'}, ['simple virtal dom']),
    el('p', ['Hello, virtual-dom']),
    el('ul', [el('li')])
])
// 2. 通过虚拟 DOM 构建真正的 DOM
var root = tree.render()
document.body.appendChild(root)
// 3. 生成新的虚拟 DOM
var newTree = el('div', {'id': 'container'}, [
    el('h1', {style: 'color: red'}, ['simple virtal dom']),
    el('p', ['Hello, virtual-dom']),
    el('ul', [el('li'), el('li')])
])
// 4. 比较两棵虚拟 DOM 树的不同
var patches = diff(tree, newTree)
// 5. 在真正的 DOM 元素上应用变更
patch(root, patches)

    当然这是非常粗糙的实践，实际中还需要处理事件监听等；生成虚拟 DOM 的时候也可以加入 JSX 语法。这些事情都做了的话，就可以构造一个简单的 ReactJS 了。

    非父子组件如何通信 ？

    Vue 官网介绍了非父子组件通信方法：

    clipboard.png

    在 bus.js 里面 写入下面信息

    import Vue from 'vue'
export default new Vue();

    在需要通信的组件都引入 Bus.js    

    <template>
  <div id="emit">
    <button @click="bus">按钮</button>
  </div> 
</template > 
import Bus from './bus.js'
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    bus() {
      Bus.$emit('msg', '我要传给兄弟组件们，你收到没有')
    }
  }
}

    在钩子函数中监听 msg 事件：

    <template>
    <div id="on">
      <p>{{message}}</p>
    </div>
</template>
import Bus from './bus.js'
export default {
    data() {
      return {
        message:  ''
      }
    },
    mounted() {　　　
       let self = this
       Bus.$on('msg', (e) => {
         self.message = e
         console.log(`传来的数据是：${e}`)
       })
    }
 }

    最后 p 会显示来自 $emit 传来的信息。

    什么情况下我应该使用 Vuex ？

    • 虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
    • 如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此，如果您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。
    • 但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

    Vue 过程图解

    Vue 生命周期过程图解

    clipboard.png

    Vue 响应式原理

    clipboard.png

    Vue 过程图解

    clipboard.png

    Vuex

    clipboard.png

    Vue 经典面试相关文章

    最后

    前端硬核面试专题的完整版在此：前端硬核面试专题，包含：HTML + CSS + JS + ES6 + Webpack + Vue + React + Node + HTTPS + 数据结构与算法 + Git 。

    如果觉得本文还不错，记得给个 star ， 你的 star 是我持续更新的动力！。

    图片描述

    vue.js前端vue-routervuex面试
    夜尽天明
    13.9k 声望6.5k 粉丝
    « 上一篇
    56 道高频 JavaScript 与 ES6+ 的面试题及答案
    下一篇 »
    GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

    引用和评论

    被 1 篇内容引用
    推荐阅读
    头像
    推荐 10 个好用的 Vue3 的开源项目，开发效率又能提升了👍

    夜尽天明赞 16阅读 8.7k评论 2

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.5k

    0 条评论
    得票最新