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程序
newVue({
el:'#app',
data:{
fruits:['Apples','Oranges','Kiwi']
},
template:
`
FruitBasket
{{fruit}}
`
});
这里是用渲染函数开发的同一个程序：
newVue({
el:'#app',
data:{
fruits:['Apples','Oranges','Kiwi']
},
render:function(createElement){
returncreateElement('div',[
createElement('h1','FruitBasket'),
createElement('ol',this.fruits.map(function(fruit){
returncreateElement('li',fruit);
}))
]);
}
});
输出如下：
FruitBasket
1、Apples2、Oranges3、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的工厂函数。然后可以在调用该组件时对其进行"解析"。
通过仅加载基本组件并把异步组件的加载推迟到未来的调用时间，可以节省带宽和程序加载时间。
这是一个异步组件的简单示例。
newVue({
components:{
'tweet-box':()=>import('./components/async/TweetBox')
}
});
当以这种方式使用时，Webpack的代码拆分将用于提供此功能。
总结
以上所述是小编给大家介绍的Vue.js中的高级面试题及答案，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。