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中的高级面试题及答案,希望对大家有所帮助
下一篇: Python内置数据类型总结(数字类型)