Vue.js中的高级面试题及答案

vue-loader 是 webpack 的加载模块，它使我们可以用 vue 文件格式编写单文件组件。

单文件组件文件有三个部分，(模板、脚本和样式)。 vue-loader 模块允许 webpack 使用单独的加载模块 (例如 sass 或 scss 加载器) 提取和处理每个人部分。该设置使我们可以使用 vue 文件无缝编写程序。

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

2、prop 如何指定其类型要求 ？

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

配置三个 prop 的例子 ：

props : {
 accountnumber:{
  type : number,
  required : true
 },
 name :{
  type : string,
  required : true
 },
 favoritecolors : array
}

3、什么是虚拟 dom ？

文档对象模型或 dom 定义一个接口，该接口允许 javascript 之类的语言访问和操作 html 文档。 元素由树中的节点表示，并且接口允许我们操作它们。但是此接口需要付出代价，大量非常频繁的 dom 操作会使页面速度变慢。

vue 通过在内存中实现文档结构的虚拟表示来解决此问题，其中虚拟节点 (node) 表示 dom 树中的节点。当需要操纵时，可以在虚拟 dom 的 内存中执行计算和操作，而不是在真实 dom 上进行操纵。这自然会更快，并且允许 dom 算法计算最优化算出计算出最优化的方式来更新实际 dom 结构。

一旦计算出，就将其应用于实际的 dom 树，这就提高了性能，这就是为什么基于虚拟 dom 的框架 （例如 vue 和 react） 如此突出的原因。

4、什么是 vue 插件 ？

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

5、什么是 mixin ？

mixin 使我们能够为 vue 组件编写可插拔和可重用的功能。 如果你希望再多个组件之间重用一组组件选项，例如生命周期 hook、 方法等，则可以将其编写为 mixin，并在组件中简单的引用它。然后将 mixin 的内容合并到组件中。如果你要在 mixin 中定义生命周期 hook，那么它在执行时将优化于组件自已的 hook。

6、 什么是渲染函数 ？举个例子。

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 数据数组。

7、哪个生命周期 hook 最合适从 apl 调用中获取数据 ？

尽管这取决于组件的用途及，但是创建的生命周期 hook 内通常非常适合放置 apl 调用。这时可以使用组件的数据和响应性功能，但是该组件尚未渲染。

8、什么时候调用 "updated" 生命周期 hook ？

在更新响应性数据并重新渲染虚拟 dom 之后，将调用更新的 hook。它可以用于执行与 dom 相关的操作，但是 (默认情况下) 不能保证子组件会被渲染，尽管也可以通过在更新函数中使用 this.$nexttick 来确保。

9、在 vue 实例中编写生命周期 hook 或其他 option/propertie 时，为什么不使用箭头函数 ？

箭头函数自已没有定义 this 上下文中。当你在 vue 程序中使用箭头函数 ( => ) 时，this 关键字病不会绑定到 vue 实例，因此会引发错误。所以强烈建议改用标准函数声明。

10、什么是异步组件 ？

当大型程序使用大量组件时，从服务器上同时加载所有组件可能是没有意义的。在这种情况下，vue 允许我们在需要时定义从服务器异步加载的组件。在声明或注册组件时， vue 接受提供 promise 的工厂函数。然后可以在调用该组件时对其进行 "解析"。

通过仅加载基本组件并把异步组件的加载推迟到未来的调用时间，可以节省带宽和程序加载时间。

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

new vue({
 components: {
  'tweet-box': () => import('./components/async/tweetbox')
 }
});

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

总结

以上所述是小编给大家介绍的vue.js中的高级面试题及答案，希望对大家有所帮助