前端面试题总结——VUE(延续更新中)

前端面试题总结——VUE(延续更新中)

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

vue-router模块的router-link组件。

2.嵌套路由怎样定义?

在 VueRouter 的参数中运用 children 设置,如许便可以够很好的完成路由嵌套。

//引入两个组件
import home from “./home.vue”
import game from “./game.vue” //定义路由

const routes = [

{ path: "/", redirect: "/home" },//重定向,指向了home组件  
{  
    path: "/home", component: home,  
    children: [  
        { path: "/home/game", component: game }  
    ]  
}  

]

3.怎样定义vue-router的动态路由?怎样猎取传过来的动态参数?

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

4.vue-router有哪几种导航钩子?

三种,
第一种:是全局导航钩子:router.beforeEach(to,from,next),作用:跳转前举行推断阻拦。
第二种:组件内的钩子
第三种:零丁路由独享组件

5.scss是什么?在vue.cli中的装置运用步骤是?有哪几大特征?

css的预编译。
运用步骤:

第一步:用npm 下三个loader(sass-loader、css-loader、node-sass)
第二步:在build目次找到webpack.base.config.js,在谁人extends属性中加一个拓展.scss
第三步:照样在同一个文件,设置一个module属性
第四步:然后在组件的style标签加上lang属性 ,比方:lang=”scss”

有哪几大特征:

1、可以用变量,比方($变量称号=值);
2、可以用混合器,比方()
3、可以嵌套

6.mint-ui是什么?怎样运用?说出最少三个组件运用要领?

基于vue的前端组件库。npm装置,然后import款式和js,vue.use(mintUi)全局引入。在单个组件部份引入:import {Toast} from ‘mint-ui’。
组件一:Toast(‘登录胜利’);
组件二:mint-header;
组件三:mint-swiper

7.v-model是什么?怎样运用? vue中标签怎样绑定事宜?

可以完成双向绑定,指令(v-class、v-for、v-if、v-show、v-on)。vue的model层的data属性。绑定事宜:<input @click=doLog()/>

8.简述一下Sass、Less,且申明区分?

他们是动态的款式言语,是CSS预处置惩罚器,CSS上的一种笼统层。他们是一种特别的语法/言语而编译成CSS。

区分:
变量符不一样,less是@,而Sass是$;
Sass支撑前提语句,可以运用if{}else{},for{}轮回等等。而Less不支撑;
Sass是基于Ruby的,是在服务端处置惩罚的,而Less是须要引入less.js来处置惩罚Less代码输出Css到浏览器

9.axios是什么?怎样运用?形貌运用它完成登录功用的流程?

要求背景资本的模块。npm install axios -S装好,然后发送的是跨域,需在设置文件中config/index.js举行设置。背景假如是Tp5则定义一个资本路由。js中运用import进来,然后.get或.post。返回在.then函数中假如胜利,失利则是在.catch函数中

10.axios+tp5进阶中,挪用axios.post(‘api/user’)是举行的什么操纵?axios.put(‘api/user/8′)呢?

跨域,增加用户操纵,更新操纵。

11.vuex是什么?怎样运用?哪一种功用场景运用它?

vue框架中状况治理。
在main.js引入store,注入。新建了一个目次store,….. export 。
场景有:单页运用中,组件之间的状况。音乐播放、登录状况、到场购物车

12.mvvm框架是什么?它和别的框架(jquery)的区分是什么?哪些场景合适?

一个model+view+viewModel框架,数据模型model,viewModel衔接两个
区分:vue数据驱动,经由历程数据来显现视图层而不是节点操纵。
场景:数据操纵比较多的场景,越发便利

13.自定义指令(v-check、v-focus)的要领有哪些?它有哪些钩子函数?另有哪些钩子函数参数?

全局定义指令:在vue对象的directive要领内里有两个参数,一个是指令称号,别的一个是函数。
组件内定义指令:directives
钩子函数:bind(绑定事宜触发)、inserted(节点插进去的时刻触发)、update(组件内相干更新)
钩子函数参数:el、binding

14.说出最少4种vue当中的指令和它的用法?

v-if:推断是不是隐蔽;v-for:数据轮回出来;v-bind:class:绑定一个属性;v-model:完成双向绑定

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

vue用来写路由一个插件。router-link、router-view

16.导航钩子有哪些?它们有哪些参数?

导航钩子有:

a/全局钩子和组件内独享的钩子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave

参数:

有to(去的谁人路由)、from(脱离的路由)、next(肯定要用这个函数才去到下一个路由,假如不必就阻拦)最常常使用就这几种

17.Vue的双向数据绑定道理是什么?

vue.js 是采纳数据挟制连系宣布者-定阅者形式的体式格局,经由历程Object.defineProperty()来挟制各个属性的setter,getter,在数据变动时宣布音讯给定阅者,触发响应的监听回调。
详细步骤:

第一步:须要observe的数据对象举行递归遍历,包含子属性对象的属性,都加上 setter和getter
如许的话,给这个对象的某个值赋值,就会触发setter,那末便可以监听到了数据变化
第二步:compile剖析模板指令,将模板中的变量替代成数据,然后初始化衬着页面视图,并将每一个指令对应的节点绑定更新函数,增加监听数据的定阅者,一旦数据有变动,收到关照,更新视图
第三步:Watcher定阅者是Observer和Compile之间通讯的桥梁,重要做的事变是:
1、在自身实例化时往属性定阅器(dep)内里增加自身
2、自身必需有一个update()要领
3、待属性变动dep.notice()关照时,能挪用自身的update()要领,并触发Compile中绑定的回调,则急流勇退。
第四步:MVVM作为数据绑定的进口,整合Observer、Compile和Watcher三者,经由历程Observer来监听自身的model数据变化,经由历程Compile来剖析编译模板指令,终究应用Watcher搭起Observer和Compile之间的通讯桥梁,到达数据变化 -> 视图更新;视图交互变化(input) -> 数据model变动的双向绑定效果。

18.请细致说下你对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构造依旧存在

19.请说下封装 vue 组件的历程?

起首,组件可以提拔全部项目的开辟效力。可以把页面笼统成多个相对自力的模块,处理了我们传统项目开辟:效力低、难保护、复用性等题目。
然后,运用Vue.extend要领建立一个组件,然后运用Vue.component要领注册组件。子组件须要数据,可以在props中接收定义。而子组件修正好数据后,想把数据通报给父组件。可以采纳emit要领。

20.你对vuex的明白?

vuex可以明白为一种开辟形式或框架。比方PHP有thinkphp,java有spring等。
经由历程状况(数据源)集合治理驱动组件的变化(比如spring的IOC容器对bean举行集合治理)。
运用级的状况集合放在store中; 转变状况的体式格局是提交mutations,这是个同步的事物; 异步逻辑应当封装在action中。

21.vue-loader是什么?运用它的用处有哪些?

剖析.vue文件的一个加载器,跟template/js/style转换成js模块。
用处:js可以写es6、style款式可以scss或less、template可以加jade等

22.请说出vue.cli项目中src目次每一个文件夹和文件的用法?

assets文件夹是放静态资本;components是放组件;router是定义路由相干的设置;view视图;app.vue是一个运用主组件;main.js是进口文件

23.vue.cli中怎样运用自定义的组件?有遇到过哪些题目吗?

第一步:在components目次新建你的组件文件(smithButton.vue),script肯定要export default {
第二步:在须要用的页面(组件)中导入:import smithButton from ‘../components/smithButton.vue’
第三步:注入到vue的子组件的components属性上面,components:{smithButton}
第四步:在template视图view中运用,<smith-button> </smith-button>
题目有:smithButton定名,运用的时刻则smith-button。

24.聊聊你对Vue.js的template编译的明白?

简而言之,就是先转化成AST树,再获得的render函数返回VNode(Vue的假造DOM节点)
概况步骤:

起首,经由历程compile编译器把template编译成AST语法树(abstract syntax tree 即 源代码的笼统语法构造的树状表现形式),compile是createCompiler的返回值,createCompiler是用以建立编译器的。别的compile还担任兼并option。
然后,AST会经由generate(将AST语法树转化成render funtion字符串的历程)获得render函数,render的返回值是VNode,VNode是Vue的假造DOM节点,内里有(标署名、子节点、文本等等)
vue的历史纪录
history 纪录中向前或许退却若干步

25.vuejs与angularjs以及react的区分?

1.与AngularJS的区分
雷同点:

都支撑指令:内置指令和自定义指令。
都支撑过滤器:内置过滤器和自定义过滤器。
都支撑双向数据绑定。
都不支撑低端浏览器。
不同点:

1.AngularJS的进修本钱高,比方增加了Dependency Injection特征,而Vue.js自身供应的API都比较简朴、直观。
2.在性能上,AngularJS依靠对数据做脏搜检,所以Watcher越多越慢。
Vue.js运用基于依靠追踪的视察而且运用异步行列更新。一切的数据都是自力触发的。
关于巨大的运用来讲,这个优化差别照样比较显著的。
2.与React的区分
雷同点:

React采纳特别的JSX语法,Vue.js在组件开辟中也推重编写.vue特别文件花样,对文件内容都有一些商定,两者都须要编译后运用。
中心思想雷同:一切都是组件,组件实例之间可以嵌套。
都供应合理的钩子函数,可以让开辟者定制化地去处置惩罚需求。
都不内置列数AJAX,Route等功用到中心包,而是以插件的体式格局加载。
在组件开辟中都支撑mixins的特征。
不同点:

React依靠Virtual DOM,而Vue.js运用的是DOM模板。React采纳的Virtual DOM会对衬着出来的效果做脏搜检。
Vue.js在模板中供应了指令,过滤器等,可以异常轻易,疾速地操纵Virtual DOM。
vue生命周期面试题

26.什么是vue生命周期?

Vue 实例从建立到烧毁的历程,就是生命周期。也就是从最先建立、初始化数据、编译模板、挂载Dom→衬着、更新→衬着、卸载等一系列历程,我们称这是 Vue 的生命周期。

vue生命周期的作用是什么?
它的生命周期中有多个事宜钩子,让我们在掌握全部Vue实例的历程时更轻易构成好的逻辑。

vue生命周期统共有几个阶段?
它可以统共分为8个阶段:建立前/后, 载入前/后,更新前/后,烧毁前/烧毁后

第一次页面加载会触发哪几个钩子?
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

DOM 衬着在 哪一个周期中就已完成?
DOM 衬着在 mounted 中就已完成了

简朴形貌每一个周期详细合适哪些场景?
生命周期钩子的一些运用要领: beforecreate : 可以在这加个loading事宜,在加载实例时触发 created : 初始化完成时的事宜写在这里,如在这完毕loading事宜,异步要求也相宜在这里挪用 mounted : 挂载元素,猎取到DOM节点 updated : 假如对数据一致处置惩罚,在这里写上响应函数 beforeDestroy : 可以做一个确认住手事宜的确认框 nextTick : 更新数据后马上操纵dom
arguments是一个伪数组,没有遍历接口,不能遍历

27.请谈谈Vue中的MVVM形式

MVVM全称是Model-View-ViewModel

Vue是以数据为驱动的,Vue自身将DOM和数据举行绑定,一旦建立绑定,DOM和数据将坚持同步,每当数据发生变化,DOM会随着变化。 ViewModel是Vue的中心,它是Vue的一个实例。Vue实例时作用域某个HTML元素上的这个HTML元素可所以body,也可所以某个id所指代的元素。

DOMListeners和DataBindings是完成双向绑定的症结。DOMListeners监听页面一切View层DOM元素的变化,当发生变化,Model层的数据随之变化;DataBindings监听Model层的数据,当数据发生变化,View层的DOM元素随之变化。

28.v-show和v-if指令的共同点和不同点?

v-show指令是经由历程修正元素的displayCSS属性让其显现或许隐蔽
v-if指令是直接烧毁和重修DOM到达让元素显现和隐蔽的效果

29.怎样让CSS只在当前组件中起作用?

将当前组件的<style>修正为<style scoped>

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

<keep-alive></keep-alive> 包裹动态组件时,会缓存不运动的组件实例,重要用于保存组件状况或防止从新衬着。

大白话: 比方有一个列表和一个概况,那末用户就会常常实行翻开概况=>返回列表=>翻开概况…如许的话列表和概况都是一个频次很高的页面,那末便可以够对列表组件运用<keep-alive></keep-alive>举行缓存,如许用户每次返回列表的时刻,都能从缓存中疾速衬着,而不是从新衬着

31.Vue中引入组件的步骤?

1.采纳ES6的import … from …语法或CommonJS的require()要领引入组件
2.对组件举行注册,代码以下

// 注册
Vue.component(‘my-component’, {
template: ‘<div>A custom component!</div>’
})
3.运用组件<my-component></my-component>

32.指令v-el的作用是什么?

供应一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目的.可所以 CSS 选择器,也可所以一个 HTMLElement 实例,

33.在Vue中运用插件的步骤

采纳ES6的import … from …语法或CommonJSd的require()要领引入插件
运用全局要领Vue.use( plugin )运用插件,可以传入一个选项对象Vue.use(MyPlugin, { someOption: true })

34.请列举出3个Vue中常常使用的生命周期钩子函数?

created: 实例已建立完成以后挪用,在这一步,实例已完成数据观察, 属性和要领的运算, watch/event事宜回调. 但是, 挂载阶段还没有最先, $el属性现在还不可见
mounted: el被新建立的 vm.$el 替代,并挂载到实例上去以后挪用该钩子。假如 root 实例挂载了一个文档内元素,当 mounted 被挪用时 vm.$el 也在文档内。
activated::keep-alive组件激活时挪用

35.请简述下Vuex的道理和运用要领

数据单向活动
一个运用可以看做是由上面三部份构成: View, Actions,State,数据的活动也是从View => Actions => State =>View 以此到达数据的单向活动.然则项目较大的, 组件嵌套过量的时刻, 多组件同享同一个State会在数据通报时涌现许多题目.Vuex就是为了处理这些题目而发生的.

Vuex可以被看做项目中一切组件的数据中心,我们将一切组件中同享的State抽离出来,任何组件都可以接见和操纵我们的数据中心.

Vuex道理
可以很好的申明Vuex的构成,一个实例化的Vuex.Store由state, mutations和actions三个属性构成:

state中保存着共有数据
转变state中的数据有且只要经由历程mutations中的要领,且mutations中的要领必需是同步的
假如要写异步的要领,须要些在actions中, 并经由历程commit到mutations中举行state中数据的变动.
更多Vuex信息,请参考Vuex官网 : vuex.vuejs.org

    原文作者:楷楷
    原文地址: https://segmentfault.com/a/1190000014252365
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞