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


Posted in Javascript onJanuary 13, 2020

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中的高级面试题及答案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript读取RSS数据
Jan 20 Javascript
XENON基于JSON变种
Jul 27 Javascript
ajax不执行success回调而是执行了error回调
Dec 10 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
ES6的异步终极解决方案分享
Jul 11 Javascript
js 实现验证码输入框示例详解
Sep 23 Javascript
深入理解redux之compose的具体应用
Jan 12 #Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 #Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 #Javascript
ES2020 新特性(种草)
Jan 12 #Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 #Javascript
es6 for循环中let和var区别详解
Jan 12 #Javascript
js 计数排序的实现示例(升级版)
Jan 12 #Javascript
You might like
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
过虑特殊字符输入的js代码
2010/08/05 Javascript
IE事件对象(The Internet Explorer Event Object)
2012/06/27 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
JS实现光滑展开合拢的菜单效果代码
2015/09/16 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
JavaScript判断微信浏览器实例代码
2016/06/13 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
2020/05/09 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
python错误处理详解
2014/09/28 Python
Selenium的使用详解
2018/10/19 Python
python构建基础的爬虫教学
2018/12/23 Python
python实现一个简单的ping工具方法
2019/01/31 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
教师岗位职责
2013/11/17 职场文书
培训自我鉴定
2014/01/31 职场文书
整改落实自查报告
2014/11/05 职场文书
2014年助理工程师工作总结
2014/11/14 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
详解MySQL中timestamp和datetime时区问题导致做DTS遇到的坑
2021/12/06 MySQL