前端面试题总结——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