动力节点旗下在线教育品牌  |  咨询热线:400-8080-105 学Java全栈,上蛙课网
首页 > 文章

Java学习之Vue.js面试题(附答案)

07-16 17:34 505浏览
举报 T字号
  • 大字
  • 中字
  • 小字

java的学习中,框架这一部分是相当重要的存在,常用的java语言的框架有SpringMVCMybatis和Dubbo等,Vue.js也是java框架,是一套用于构建用户界面的渐进式JavaScript框架,它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计。很多公司在面试中高级的java工程师时,可能会考到Vue.js框架的知识,所以今天总结了Vue.js面试题,有学习和面试需要的朋友一起看下去吧。

1、Vue.js常用指令都有什么?

答:(1v-model 多用于表单元素实现双向数据绑定(同angular中的ng-model)(2v-for 格式:v-for="字段名 in(of) 数组json" 循环数组或json(同angular中的ng-repeat),需要注意从Vue.js2开始取消了$index(3v-show 显示内容 (同angular中的ng-show)(4v-hide 隐藏内容(同angular中的ng-hide)(5v-if 显示与隐藏 (dom元素的删除添加 同angular中的ng-if 默认值为false)(6v-else-if 必须和v-if连用(7v-else 必须和v-if连用,不能单独使用,否则报错模板编译错误(8v-bind 动态绑定 作用是及时对页面的数据进行更改(9v-on:click 给标签绑定函数,可以缩写为@,例如绑定一个点击函数,函数必须写在methods里面(10v-text 解析文本(11v-html 解析html标签(12v-cloak 防止闪烁(13v-pre 把标签内部的元素原位输出。

2、Vue.js中key值的作用是什么?

答:用于管理可复用的元素。因为Vue.js 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。当 Vue.js 用v-for正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue.js 将不会移动DOM元素来匹配数据项的顺序,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。

3、Vue.js $nextTick 作用是什么?

答:官方解释:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。简单的说就是再DOM操作时,Vue.js的更新是异步的,$nextTick 是用来知道什么时候DOM更新完成的。

举例:我们给一个div设置显示隐藏,当点击button的时候 #textDiv 先是被渲染出来,接着我们获取 #textDiv的html内容


 
这是一段文本
获取div内容

 

这段代码表面上看不会有问题,但实际上点击报错,提示获取不到div元素,这里就涉及到 Vue.js 异步更新队列。

4、Vue.js异步更新队列是怎样的?

答:Vue.js 执行DOM更新时,只要观察到数据变化,就会自动开启一个队列,并缓冲在同一个事件循环中发生的所以数据改变。在缓冲时会去除重复数据,从而避免不必要的计算和DOM操作。以上面的代码举例,你用一个for循环来动态改变 isShow 100 次,其实它只会应用最后一次改变,如果没有这种机制,DOM 就要重绘100次,这固然是一个很大的开销。所以执行this.isShow= true时,#textDiv还没有被创建出来,直到下一个Vue.js事件循环时,才开始创建。

上面的代码应修改为:

getText:function(){
    this.showDiv = true;
    this.$nextTick(function(){
            var text = document.getElementById('div').innnerHTML;
            console.log(text);  
    });
}

5、什么是Vue.js生命周期和生命周期钩子函数?

答:Vue.js 的生命周期是:Vue.js 实例从创建到销毁,也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程。

6、Vue.js双向绑定实现的原理是什么?

答:采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通Javascript 对象传给 Vue.js 实例作为它的data选项时,Vue.js 将遍历它的属性,用 Object.defineProperty 将它们转为getter/setter。用户看不到 getter/setter,但是在内部它们让Vue.js追踪依赖,在属性被访问和修改时通知变化。

7、Vue.js的路由实现模式是什么?

答:hash模式:在浏览器中符号“#”,#以及#后面的字符称之为hash,用window.location.hash读取;特点是hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。hash模式下,仅hash符号之前的内容会被包含在请求中,如 http://www.xxx.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。

history模式:history采用HTML5的新特性;且提供了两个新方法:pushState(),replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更。history 模式下,前端的 URL 必须和实际向后端发起请求的URL一致。

8、Vue.js组件间的参数传递?

答:(1)父组件与子组件传值。父组件传给子组件:子组件通过props方法接受数据;子组件传给父组件:$emit方法传递参数。

2)非父子组件间的数据传递,兄弟组件传值。eventBus,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。项目比较小时,用这个比较合适。

9、Vue.js-router有哪几种导航钩子?

答:一共有三种,(1)是全局导航钩子:router.beforeEach(to,from,next),作用:跳转前进行判断拦截;(2)组件内的钩子;(3)单独路由独享组件。

10、Vue.js与angular的区别是什么?

答:(1)Vue.js仅仅是mvvm中的view层,只是一个如jquery般的工具库,而不是框架,而angular而是mvvm框架。

2)Vue.js的双向邦定是基于ES5 中的3.getter/setter来实现的,而angular而是由自己实现一套模版编译规则,需要进行所谓的“脏”检查,Vue.js则不需要。因此,Vue.js在性能上更高效,但是代价是对于ie9以下的浏览器无法支持。

3)Vue.js需要提供一个el对象进行实例化,后续的所有作用范围也是在el对象之下,而angular而是整个html页面。一个页面,可以有多个Vue.js实例。

4)Vue.js真的很容易上手,学习成本相对低,不过可以参考的资料不是很丰富,官方文档比较简单,缺少全面的使用案例。高级的用法,需要自己去研究源码,至少目前是这样。

今天这篇文章整理的Vue.js面试题就是上面这10道了,希望大家可以将这不多的题目全部学会。因为现在Vue.js框架是比较流行的,它核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合,另一方面当与现代化的工具链以及各种支持类库结合使用时,Vue.js也完全能够为复杂的单页应用提供驱动。没有基础的朋友可以先学习“带你快速掌握Vue.js”这一课程,可以一步一步地让大家快速地掌握Vue.js这样一个前端核心框架,能更好的理解上面的Vue.js面试题,更好的适应公司开发需要。

0人推荐
共同学习,写下你的评论
0条评论
头晕目眩
程序员头晕目眩

3篇文章贡献12177字

作者相关文章更多>

推荐相关文章更多>

Java数据结构

HelloWorld10-31 08:24

浅谈MySQL中SQL优化的常用方法

军哥08-12 23:29

五分钟读懂UML类图

江湖人称小李白12-10 10:41

MyBatis开发框架的四大核心

IT逐梦者08-17 21:43

一次搞定continue,break和return

HelloWorld11-06 11:19

发评论

举报

0/150

取消