15个 Vue.js 高级面试题

翻译：疯狂的技术宅

www.zeolearn.com/interview-q…

未经容许严禁转载

1. 渲染项目列表时，“key” 属性的做用和重要性是什么？

渲染项目列表时，key 属性容许 Vue 跟踪每一个 Vnode。key 值必须是惟一的。

若是没有使用 key 属性，而且列表的内容发生了改变（例如对列表进行排序），则虚拟 DOM 宁愿使用更新的数据来修补节点，来反映更改，而不是上下移动元素。这是默认模式，很是有效。

当提供惟一的键值 IS 时，将根据对键的更改对元素进行从新排序（而且不使用新数据对它们进行修补），若是删除了 key（例如，删除列表中的项目时），则对应的元素节点也被销毁或删除。

请注意下图：

这里有一个父组件渲染一个子组件列表。咱们看到三个列表项被渲染为三个子组件节点。这些子组件都包含一个 span 标记和一个输入框，可能还包含一个本地状态对象（可选）。如今让咱们检查两种状况：

当不使用 key 属性时：例如若是列表已从新排序，则 Vue 会使用从新排序的数据简单地修补已经存在的三个节点，而不用移动这些节点。只要用户没有输入或更改这些子组件中一个或多个子组件的本地状态，此方法就能够正常工做。所以假设用户输入了组件编号为 3的输入框，从新排序列表后，组件编号为 3 的 span 标签内容将呗更改，可是输入框将与用户键入的内容击破状态数据一块儿保留在这里。这是由于 Vue 没法识别组件编号 3，它只是从新修补它所看到的更新数据，即 span 标签的内容。

当在子组件上使用 key 属性时，Vue 会知道该组件的身份，而且在对列表进行从新排序时，将移动节点而不是对其进行修补。这可以确保手动编辑的输入框以及整个组件移动到新位置。

在有条件地渲染组件或元素时，还能够用 key 属性来向 Vue 发出有关元素惟一性的信号，并确保元素不会被新数据从新修补。

2.你将怎样在模板中渲染原始 HTML？

在模板中输出内容的典型方法是使用 mustache 语法标签从方法、属性或数据变量输出数据。可是 mustache 标记会渲染文本。若是你尝试使用 mustache 标记来渲染 HTML，它将以文本字符串的形式去渲染，而且不会被解析。要将内容渲染和解析为 html，咱们可使用 v-html 指令，以下所示。

模板

<div id="app" v-html=”title”></div>
复制代码

App 应用

new Vue({
    el: '#app',
    data: {
      title: '<h1 style="color: green;">Vue.js</h1>'
    }
});
复制代码

输出

Vue.js

如上面的例子所示，v-html 指令解析全部HTML，结果上面的语句将按需渲染。开发人员必须在了解 v-html 的前提下使用。若是不恰当地使用了 v-html，可能会使网站遭受注入攻击，颇有可能会从外部源注入并执行恶意代码。

3. 什么是vue-loader？

Vue-loader 是 Webpack 的加载器模块，它使咱们能够用 .vue 文件格式编写单文件组件。单文件组件文件有三个部分，即模板、脚本和样式。 vue-loader 模块容许 webpack 使用单独的加载器模块（例如 SASS 或 SCSS 加载器）提取和处理每一个部分。该设置使咱们可使用 .vue 文件无缝编写程序。

vue-loader 模块还容许把静态资源视为模块依赖性，并容许使用 webpack 加载器进行处理。并且还容许在开发过程当中进行热重装。

4. 什么是 mixin？

Mixins 使咱们可以为 Vue 组件编写可插拔和可重用的功能。若是你但愿在多个组件之间重用一组组件选项，例如生命周期 hook、方法等，则能够将其编写为 mixin，并在组件中简单地引用它。而后将 mixin 的内容合并到组件中。若是你要在 mixin 中定义生命周期 hook，那么它在执行时将优先于组件本身的 hook 。

5. 在开发过程当中，若是你的 Vue 程序和后端 API 服务器未在同一主机上运行，该如何代理 API 请求。假设使用 Vue-CLI 3 进行设置？

Let’s say we have a Node.js backend server running on localhost:4040. To ensure it is proxyed in and accessible from the components, we can configure the vue.config.js file and include a devServer section as shown below:

假设咱们有一个运行在 localhost:4040 上的 Node.js 后端服务器。为了确保代理并能够从组件中访问它，能够配置 vue.config.js 文件并包含 devServer 部分，以下所示：

在 vue.config.js 文件中：

module.exports: {
    devServer: {
        proxy: {
            '/api': { 
                target: ‘http://localhost:4040/api’, 
                changeOrigin: true 
            }
        }
    }
}
复制代码

6. prop 如何指定其类型要求？

经过实现 prop 验证选项，能够为单个 prop 指定类型要求。这对生产没有影响，可是会在开发阶段发出警告，从而帮助开发人员识别传入数据和 prop 的特定类型要求的潜在问题。

配置三个 prop 的例子：

props: {
    accountNumber: {
        type: Number,
        required: true
    },
    name: {
        type: String,
        required: true
   },
   favoriteColors: Array
}
复制代码

7. 什么是虚拟 DOM？

文档对象模型或 DOM 定义了一个接口，该接口容许 JavaScript 之类的语言访问和操做 HTML 文档。元素由树中的节点表示，而且接口容许咱们操纵它们。可是此接口须要付出代价，大量很是频繁的 DOM 操做会使页面速度变慢。

Vue 经过在内存中实现文档结构的虚拟表示来解决此问题，其中虚拟节点（VNode）表示 DOM 树中的节点。当须要操纵时，能够在虚拟 DOM的 内存中执行计算和操做，而不是在真实 DOM 上进行操纵。这天然会更快，而且容许虚拟 DOM 算法计算出最优化的方式来更新实际 DOM 结构。

一旦计算出，就将其应用于实际的 DOM 树，这就提升了性能，这就是为何基于虚拟 DOM 的框架（例如 Vue 和 React）如此突出的缘由。

8. 什么是 Vue 插件？

Vue 插件容许开发人员构建全局级别的功能并将其添加到 Vue。用于向程序添加能够全局访问的方法和属性、资源，选项，mixin 以及其余自定义 API。 VueFire 是 Vue 插件的一个例子，该插件添加了 Firebase 特定的方法并将其绑定到整个程序。以后 firebase 函数可在程序结构中的任何位置的 this 上下文中使用。

9. 什么是渲染函数？举个例子。

Vue 容许咱们以多种方式构建模板，其中最多见的方式是只把 HTML 与特殊指令和 mustache 标签一块儿用于响应功能。可是你也能够经过 JavaScript 使用特殊的函数类（称为渲染函数）来构建模板。这些函数与编译器很是接近，这意味着它们比其余模板类型更高效、快捷。因为你使用 JavaScript 编写渲染函数，所以能够在须要的地方自由使用该语言直接添加自定义函数。

对于标准 HTML 模板的高级方案很是有用。

这里是用 HTML 做为模板的 Vue 程序

new Vue({
  el: '#app',
  data: {
    fruits: ['Apples', 'Oranges', 'Kiwi']
  },
  template:
      `<div> <h1>Fruit Basket</h1> <ol> <li v-for="fruit in fruits">{{ fruit }}</li> </ol> </div>`
});
复制代码

这里是用渲染函数开发的同一个程序：

new Vue({
  el: '#app',
  data: {
    fruits: ['Apples', 'Oranges', 'Kiwi']
  },
  render: function(createElement) {
    return createElement('div', [
      createElement('h1', 'Fruit Basket'),
      createElement('ol', this.fruits.map(function(fruit) { 
        return createElement('li', fruit); 
      }))
    ]);
  }
});
复制代码

输出：

Fruit Basket

1. Apples
2. Oranges
3. Kiwi

在上面的例子中，咱们用了一个函数，它返回一系列 createElement() 调用，每一个调用负责生成一个元素。尽管 v-for 指令在基于 HTML 的模板中起做用，可是当使用渲染函数时，能够简单地用标准 .map() 函数遍历 fruits 数据数组。

10. 哪一个生命周期 hook 最适合从 API 调用中获取数据？

尽管这取决于组件的用途及，可是建立的生命周期 hook 内一般很是适合放置 API 调用。这时可使用组件的数据和响应性功能，可是该组件还没有渲染。

11. 何时调用 “updated” 生命周期 hook ？

在更新响应性数据并从新渲染虚拟 DOM 以后，将调用更新的 hook。它能够用于执行与 DOM 相关的操做，可是（默认状况下）不能保证子组件会被渲染，尽管也能够经过在更新函数中使用 this.$nextTick 来确保。

12. 在 Vue 实例中编写生命周期 hook 或其余 option/propertie 时，为何不使用箭头函数？

箭头函数本身没有定义 this 上下文，而是绑定到其父函数的上下文中。当你在 Vue 程序中使用箭头函数（=>）时，this 关键字病不会绑定到 Vue 实例，所以会引起错误。因此强烈建议改用标准函数声明。

13. 何时使用keep-alive元素？

当因为数据属性或其余某种响应状态而动态切换组件时，每次将它们切换到渲染状态时，都会被从新渲染。尽管你可能须要这种行为，但在某些状况下从新渲染多是不合适的。例如在建立时从 API 调用中引入数据的组件。你可能不但愿每次动态切换这个组件进行渲染时都调用此 API。这时你能够将组件包含在 keep-alive 元素中。keep-alive 元素缓存该组件并从那里获取它，而不是每次都从新渲染它。

14. 在大型 Vue 程序中管理状态的推荐方法是什么？为何？

当程序在功能和代码方面不断增加时，状态管理会变得困难，而且使用无穷无尽的下游网络 prop 和上游事件固然不是明智的决定。在这种状况下，有必要将状态管理转移到中央管理系统。 Vue 生态系统中提供了 Vuex，它是官方的状态管理库，也是推荐用于集中存储状态的模式。

Vuex 容许维护中央状态。组件将 Vuex 用做响应性数据存储，并在状态更新时进行更新。多个或者不相关的组件能够依赖于相同的中央存储。

在这种状况下，Vue 充当纯 View 层。要修改状态，视图层（例如按钮或交互式组件）须要发出 Vuex Action，而后执行所需的任务。为了更新或修改状态，Vuex 提供了 Mutations。

这个工做流程的目的是留下可用的操做痕迹。

15. 什么是异步组件？

当大型程序使用大量组件时，从服务器上同时加载全部组件多是没有意义的。在这种状况下，Vue 容许咱们在须要时定义从服务器异步加载的组件。在声明或注册组件时，Vue 接受提供 Promise 的工厂函数。而后能够在调用该组件时对其进行“解析”。

经过仅加载基本组件并把异步组件的加载推迟到将来的调用时间，能够节省带宽和程序加载时间。

这是一个异步组件的简单示例。

new Vue({
    components: {
        ‘tweet-box’: () => import(‘./components/async/TweetBox’)
    }
}); 
复制代码

当以这种方式使用时，Webpack 的代码拆分将用于提供此功能。

欢迎关注前端公众号：前端先锋，免费领取 webpack 全系列教程（从入门到进阶）。