当前位置 : 首页/建站知识/网站制作教程/vue面试题知识点及答案与常见问题汇总

vue面试题知识点及答案与常见问题汇总

发布时间:2021年4月22日 12:24 作者:誉新源

  今天我们将对vue面试题进行详细汇总答疑,那么在vue面试中有哪些知识点呢?常见vue面试题又有哪些题目呢?今天我们将具体回答这些问题。

 

最新vue面试题

 

  一般面试题都会考一些基础的问题,那么哪些属于vue面试题中的基础问题呢?下面我们将一一举出,也请广大面试者,记录好,并做好面试准备。

 

1.Vue的优点有哪些?

 

答:国内框架,简单易学,整个文件只有20kB左右,超快虚拟 DOM,渐进式框架。支持双向数据绑定:保留了angular的特点,在数据操作方面更为简单,由于是国人开发,国内文档社区完善,最大的亮点支持组件化,组件完美保留了React的优点,能够实现html的封装和重用,开发效率更高,使用脚手架能够支持视图、数据、结构分离:使数据的更改更为简单,直观,修改开发更为便捷。

 

2.虚拟DOM最主要的作用是什么?

 

答:直接修改Dom操作是非常耗费性能的, 通过虚拟DOM进行计算到挂载降低了直接调用DOM操作的频率,大大提高了性能,另外通过虚拟DOM能够及时的响应数据的更新变化。

 

3.对于渐进式框架的是如何理解?

 

答:主张最少;可以根据不同的需求选择不同的层级。

 

4.什么是vuex?你怎么用?使用哪个功能场景?


vue框架中的状态管理。在main.js中引入store,注入。新设目录store.js..export。场景包括单页应用中组件之间的状态。音乐播放,登录状态,加入购物车。


5.vuex有什么属性?


State、Getter、Mutation、Action、Module有5种。state=>基本数据(数据源保管地)getters=>基本数据产生的数据。mutations=>如何提交变更数据,同步!actions=>就像饰器一样,包裹mutations,可以异步。modules=>模块化Vuex。

 

常见vue面试题

 

1.vue父组件是如何向子组件传递数据?


答:通过props进行传递。


2.子组件如何向父组件传递事件?


答:通过$emit方法进行传递


3.v-show和v-if指令有哪些共同点和不同点?


答: 共同点:都能通过命令对控制元素进行显示或隐藏;

     不同点:实现本质方法不同,v-show本质就是通过控制css中的display设置为none,而v-if是动态的向DOM树内添加或者删除DOM元素,若初始值为false,就不会编译了


总结:如果要频繁切换某节点,使用v-show虽然初始开销大,但是切换对性能影响小,但如果不需要频繁切换某节点使用v-if初始渲染开销较小,但切换开销比较大。


4.如何让CSS只在当前组件中起作用?


答:在组件中的style前面加上scoped


5.<keep-alive></keep-alive>的作用是什么?


答:keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。


6.如何获取dom?


答:用法是:ref="domName" 用法是:this.$refs.domName


7.说出几种vue当中的指令和它的用法?


答:v-model双向数据绑定;v-for循环;v-if v-show 显示与隐藏;v-on事件;v-once只运行一次;v-bind 绑定元素。


8. vue-loader有什么作用?使用它的用途有哪些?


答:

作用:vue文件的一个加载器,将template/js/style转换成js模块。
用途:js可以写es6、style样式可以scss或less、template可以加jade等


10.为什么使用key?


答:需要使用key来给每个节点做一个唯一标识。




11.分别简述computed和watch的使用场景


答:computed:
    当一个属性受多个属性影响的时候就需要用到computed
    最典型的栗子: 购物车商品结算的时候
       watch:
    当一条数据影响多条数据的时候就需要用watch
    搜索数据


12.v-on可以监听多个方法吗?


答:<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">。


13.$nextTick的使用


答:当你修改了data的值然后马上获取这个dom元素的值,是不能获取到更新后的值,你需要使用$nextTick这个回调,让修改后的data值渲染更新到dom元素之后在获取,才能成功。


14.vue组件中data为什么必须是一个函数?


答:因为JavaScript的特性所导致,在component中,data必须以函数的形式存在,不可以是对象。组建中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一份新的data,相当于每个组件实例都有自己私有的数据空间,它们只负责各自维护的数据,不会造成混乱。而单纯的写成对象形式,就是所有的组件实例共用了一个data,这样改一个全都改了。


15.Vue中如何实现双向数据绑定?


回答:vue双向数据绑定是通过将数据劫持与订阅模式相结合来实现的,即数据与视图同步,数据发生变化,视图随之改变,视图随之改变,数据也随之改变;
核心:关于VUE双向数据绑定,Object.defineProperty()方法。


16.单页应用与多页应用的区别及优缺点。


回答:单页应用程序(SPA),通俗地说,就是指只有一个主页的应用程序,浏览器首先要加载所有必要的html,js,css。这个所谓的主页包含了所有的页面内容。但是写作时,仍然会分开写作(页面片段),然后在交互时通过路由程序动态加载,单页跳转,只刷新局部资源。在pc端广泛使用。
多页(MPA)是指一个应用程序中有多个页面,当页面跳转时,整个页面被刷新。


单页的好处:


用户体验好,速度快,内容变化不需要重新加载整个页面。基于这一点,spa对服务器压力小;前后端分离;页面效果会很酷(比如切换页面内容时的特殊动画)。


单页缺点:


不利于搜索引擎优化;导航是不可用的。如果你必须导航,你需要自己前进和后退。(因为单页不能使用浏览器的前进和后退功能,所以你需要建立自己的堆栈管理);第一次加载需要很多时间;页面复杂性大大提高。


17.v-if和v-for的优先级。


答:当v-if与v-for一起使用时,v-for优先级高于v-if,这意味着v-if将在每个v-for循环中重复运行。因此,不建议同时使用v-if和v-for。如果v-if和v-for一起使用,vue中的自动提示v-if应该放在外层。


18.assets和static的区别。


回答:

相同之处:assets和static储静态资源文件。项目中所需的资源文件图片、字体图标、样式文件都可以放在这两个文件下,这是一样的。


区别:assets中存储的静态资源文件在项目包装过程中,即运行npmrunbuild时,将assets中存储的静态资源文件包装上传,所谓包装简单点,可理解为压缩体积、代码格式化。而且压缩后的静态资源文件最终也会被放置在static文件中,与index.html一起上传到服务器上。放置在static中的静态资源文件不会采用包装压缩格式化等流程,而是直接进入包装目录,直接上传到服务器上。由于避免了压缩直接上传,在包装过程中会提高一定的效率,但static中的资源文件由于没有进行压缩等操作,因此文件的体积也相对于assets中包装后的文件提交较大。
推荐:将项目中template所需的样式文件js文件等全部放入assets中,然后进行包装。减少体积。而且项目中引入的第三方资源文件,如iconfoont.css,可以放入static中,因为这些引入的第三方文件已经被处理过,我们不再需要处理,直接上传。


19.vue常用的装饰符。


答:。stop:相当于JavaScript中的event。stoppropagation(),防止事件起泡;.prevent:相当于JavaScript中的event.preventDefault(),防止预先设定的行为(事件可以取消时,取消事件,不停止事件的进一步传播);.capture:与事件泡沫的方向相反,事件捕捉由外向内;.self:只会触发自己范围内的事件,不含子元素;.once:只触发一次。


20.vue的两个核心点?


回答:数据驱动,组件系统。
资料驱动:ViewModel,确保资料与视图的一致性。
组件系统:应用UI可以看作都是由组件树组成的。


21.vue和jQuery的区别。


回答:jQuery是利用选择器($)选择DOM对象,对其进行分配、取值、事件绑定等操作,实际上与本地HTML的区别只在于可以更方便地选择和操作DOM对象,而数据和界面是一致的。例如,需要获得label标签的内容:$("lable").val();或者依赖于DOM元素的值。Vue通过Vue对象完全分离数据和View。操作数据不再需要引用相应的DOM对象。可以说数据和View是分开的,通过Vue对象vm实现相互绑定。这就是传说中的MVVM。


22.引入部件的步骤。


回答:将组件引入template;在script的第一行cript第一行路径;在component上写下组件名。


23.delete和Vue.delete删除数组的区别。


delete只是删除的要素变成了empty/undefined的其他要素的键值。Vue.delete直接删除了数组,改变了数组的键值。


24.如何解决SPA速度慢如何解决?


答:安装动态懒惰加载所需插件;使用CDN资源。


25.Vue-router跳跃与location.href有何不同?


回答:用location.href='/url'跳转,简单方便,但页面更新;使用history.pushState('/url'),不刷新页面,静态跳转;引入router,然后使用router.push('/url')进行跳跃,使用diff算法,实现按需加载,减少dom消耗。事实上,使用router跳转与使用history.pushState()没有什么区别,因为vue-router使用history.pushState(),特别是在history模式下。


26.vueslot


回答:简单地说,假设父组件需要在子组件中放置一些DOM,那么这些DOM就是显示,不显示,在哪里显示,如何显示,这就是slot分发的责任。

 

面试中需要注意的知识点:

 

1.什么是vue生命周期?有什么作用?


答:各Vue实例在创建时经过一系列初始化过程。例如,需要设置数据监听、编译模板、将实例载入DOM,在数据变化时更新DOM等。同时,在这个过程中也运行了被称为生命周期钩的函数,给用户在不同阶段追加自己代码的机会。(ps:生命周期钩是生命周期函数)例如,如果您想通过一些插件操作DOM节点,并在页面渲染后弹出广告窗口,您可以首先在mounted中进行。


2.第一加载会触发哪些钩子?


beforeCreate、created、beforeMount、mounted。


3.简述每个周期具体适合哪些场景。


beforeCreate:newvue实例后,只有默认的生命周期钩和默认的事件,其他的还没有制作。当beforeCreate生命周期执行时,data和methods的数据尚未初始化。这个阶段不能使用data中的数据和methods中的方法。


create:data和methods已经初始化,调用methods的方法,操作data的数据,最初可以在这个阶段操作。


beforeMount:执行这个钩子时,在内存中编译了模板,但是还没有登载在页面上,页面很旧。


mounted:执行该钩时,Vue实例初始化。此时,组件脱离创建阶段,进入运行阶段。如果您想通过插件操作页面上的DOM节点,您可以在此阶段尽快进行。


beforeUpdate:执行该钩子时,页面显示的数据仍旧,data数据更新后,页面未与最新数据同步。


updated:页面显示的数据和data的数据同步,是最新的。


beforeDestory:Vue实例从运行阶段进入破坏阶段,此时所有data和methods、命令、过滤器……都处于可用状态。还没有真正被破坏。


destroyed:此时,所有data和methods、命令、过滤器……都处于不可用的状态。组件已经被销毁。


4.created和mounted的区别。


created:在模板显示为html之前调用,通常将某些属性值初始化,然后显示为视图。


mounted:模板渲染html后调用,通常在初始页面完成后,对html的dom节点进行必要的操作。


5.vue获取数据的周期函数。


一般created/beforeMount/mounted都可以;例如,如果你想操作DOM,你必须在mounted时操作它。


6.请详细说明vue生命周期的理解


共分为8个阶段制作前/后,加载前/后,更新前/后,销毁前/后。


创建前/后:在beforeCreated阶段,vue实例的装载要素$el和**数据对象**data为undefined,尚未初始化。在created阶段,vue实例的数据对象data有,$el还没有。


载入前/后:在beforeMount阶段,vue实例$el和data初始化,但载入前是虚拟的dom节点,data.message尚未更换。在mounted阶段,vue实例完成,data.message成功渲染。


更新前/后:data变化时,触发beforeUpdate和updated方法。


销毁前/后:实施destroy方法后,data的变化不会触发周期函数,此时vue实例解除了事件监听和dom的联系,但dom结构依然存在。


7.什么是mvvm框架?


vue是实现双向数据绑定的mvvm框架,视图更新模型层,模型层更新视图层。在vue中,使用双向绑定技术,View的变化可以实时改变Model,Model的变化也可以实时更新到View。


8.什么是vue-router?有哪些组件?


vue用于写路由插件。router-link,router-view。


9.active-class是哪个组件的属性?


vue-router模块的router-link组件。children数组定义子路由。


10.如何定义vue-router的动态路由?如何获得传输的价值?


在router目录下的index.js文件中,添加path属性/:id。使用router对象的params.id。


11.vue-router有哪些导航钩?


有三种:


第一:全站导航钩:router.beforeeach(to、from、next),在跳跃前进行判断拦截。


第二:组件内的钩子。


第三:独立路由独占组件。


12.$route和$router的区别。


$router是Vuerouter的例子,想在script标签上导航不同的URL,使用$router.push方法。回到上一个历史history用$router.to(-1)


$route是当前router的跳跃对象。其中可以当前路由的name、path、query、parmas等。


13.vue-router的两种模式。


hash模型:地址栏URL中的#符号

history模式:打印window.history对象,可以看到其中提供的方法和记录长度。利用HTML5HistoryInterface中新增的pushState()和replaceState()的方法。(需要特定的浏览器支持)。


14.vue-router实现路由懒惰加载(动态加载路由)


答:三种方式。


第一,vue异步部件技术=====异步加载,vue-router配置路由,使用vue异步部件技术,可以按需加载。但是,在这种情况下,下一个部件生成js文件。


第二,路由懒惰加载(使用import)。


第三,网络提供的require.ensure()、vue-router配置路由、使用网络pack的require.ensure技术也可以按需加载。在这种情况下,多个路由指定相同的chunkName,合并包装成js文件。

 

以上就是vue面试题。

 

vue面试题


 

相关文章