专项：Vuejs面试题集合

参考网络资源：https://segmentfault.com/a/1190000012315822

1、active-class是哪个组件的属性？

答：active-class是vue-router模块的router-link组件的属性。router-link支持用户在具有路由功能的应用中导航，默认渲染成带有正确链接的<a>标签。active-class设置链接在激活时使用的CSS类名，默认值router-link-active

2、嵌套路由怎么定义？

实际应用界面，是由多层嵌套的组件组合而成。比如“首页”组件中还嵌套着“登录”“注册”组件：

<template id="home">

<!-- 注意：组件只能有一个根元素，所以我们包装到这个div中 -->

<div>

<h2>首页</h2>

<router-link to="/home/login">登录</router-link>

<router-link to="/home/reg">注册</router-link>

<!-- 路由匹配到的组件将渲染在这里 -->

<router-view></router-view>

</div>

</template>

定义路由：

// 2. 定义路由

const routes = [

{ path: '/', redirect: '/home' },

{ path: '/home',

　　component: Home,

　　children:[

　　　　{ path: '/home/login', component: Login},

　　　　{ path: '/home/reg', component: Reg}

　　] },

{ path: '/news', component: News} ]

home路由配置了它的children，这就是嵌套路由。

3、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

在定义路由时，在path属性的值里使用动态路径参数，以冒号开头，如：

{

　　path : /user / :id,

　　component: User

}

当匹配到/user下的任意路由时，参数值会被设置到this.$route.params下，获取动态参数可以通过$route.params.id实现：

const user = {

　　template: '<div>user{{$route.params.id}}</div>'

}

4、vue-router有哪几种导航钩子？

导航钩子主要用来拦截导航，让它完成跳转或取消

（1）全局导航钩子：

const router = new VueRouter({...})   //定义路由

router.beforeEach((to,from,next) => {       //点击导航前调用钩子函数

//...导航触发时，全局的before钩子按创建顺序调用。钩子是异步解析执行，此时导航在所有钩子resolve完之前一直处于等待中

})

router.afterEach(route => {     //点击导航后调用钩子函数

　　//...

})

（2）单个路由独享的钩子：

const  router = new VueRouter({

　　routes:[

　　　　{

　　　　　　path: '',

　　　　　　component: a,

　　　　　　beforeEnter: (to.from,next) => {    //....  },

　　　　　　beforeEnter: (route) => {   //... }

　　　　}

　　]

})

（3）组件内的钩子：在组件定义中定义的钩子函数

const foo = {

　　template: '...',

　　beforeRouteEnter (to,from,next) {    // 在渲染该组件的对应路由被确认前调用，不能获取组件实例this，因为钩子执行前，组件实例还没创建  },

　　beforeRouteUpdate (to,from,next ) {  // 在当前路由改变但该组件被复用时调用。对于带有动态参数的路径/foo/:id，在/foo/1和/foo/2之间跳转的时候，渲染相同组件则调动这个钩子，可访问this},

　　beforeRouteLeave (to,from,next ) { // 导航离开该组件的对应路由时调用，可访问this}

}

5、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？

scss是CSS的预处理器，是CSS的开发工具

安装步骤：使用npm下载三个对应依赖node模块：

node-sass、sass-loader、css-loader

使用步骤：（1）在webpack-base.config.js配置文件中加一个扩展extension值：.scss

（2）在module-->rules里面加多一个test、loader

（3）在组件使用sass的地方，组件的style标签加上lang属性

<style lang="scss" scoped="" type="text/css"></style>

特性：可以使用变量$变量名：值、

可以嵌套：li { font: { family: serif;  weight: bold;}}、转换成li { font-family: serif; font-weight: bold; }

6、mint-ui是什么？怎么使用？

mint-ui是基于vue.js的移动端组件库，可以参考elementUI的引入及使用方式

7、v-model 是什么？怎么使用？如何实现双向绑定？

v-model是vue的model层的data属性，实现输入值与数据域的双向绑定；

在需要用户输入或者选择值的时候，可使用v-model，其值要与data数据域中的属性值对应，这样就能实现绑定；

双向绑定的实现：

页面显示的语法糖：<input v-model="name" />，（语法糖的意思是仅供显示）

实际上上面等同于：<input v-bind:value="name" v-on:input="name = $event.target.value">，简写即<input v-bind:value="name" v-on:input="name = arguments[0]">

故，要让组件的v-model生效，它必须接受一个value属性（用于v-bind绑定响应式数据），且在有新的value时触发input事件并传递数据

另：vue对v-model实现的一个规则：使用了v-model的组件会自动监听input事件并把这个input事件所携带的值传递给v-model所绑定的属性；

8、axios是什么？怎么使用？描述使用它实现登录功能的流程？

axios是请求后台资源的模块，可以理解为前台通过它获取后台数据，类似于ajax交互，可用npm install axios -s安装依赖模块

使用：在main.js入口文件中import进axios模块，由于它发送的是跨域，需要在main.js中声明出axios的属性withCredentials为true：

import axios from 'axios'

axios.defaults.withCredentials = true

然后在api.js文件中就可以使用get方式通过url获取数据了：

export const method1 = params => {  
return axios.get(`url.htm`, {params: params})   //为了区分出是前台请求，可以配置请求后缀为htm
}
在这之前还可设置http response拦截器：axios.interceptors.response.use(response => { ... }, error => { ...} )
实现登录功能的流程：登录页面点击提交，调用api.js中的登录方法，请求后台数据响应，根据返回数据做出响应，登录成功则在登录方法的then函数中实现路由的跳转，登录失败则在catch函数中给出错误提示

9、RESTful是什么？怎么使用？
RESTful是一个api标准，无状态请求（有状态指这一步的操作是在前面的操作的基础上，无状态指直接通过URI直接CRUD）。请求的路由地址是固定的。RESTful API客户端借助包含状态转移的表征数据，记录当前的应用状态以及对应可转移状态的方式。
REST：representational state transfer是web服务的一种架构风格，是一种思想。最终是为了提供一套统一的接口，在移动互联网时代，一套接口供web、Android、iOS共同调用，故传统前后端耦合在一起开发的模式就显得不够用了。
REST架构的主要原则：网络上的所有事物都被抽象为资源，每个资源都有一个唯一的URI，同一个资源有多种表现形式（xml、json），对资源的操作不会改变URI，所有操作都是无状态的。
使用：springmvc实现restful服务，原生态的支持了REST风格的架构设计，还有springboot。

10、vuex是什么？怎么使用？哪些功能场景使用它？
vuex是vue框架中做状态管理的（状态即数据），主要使用其中的state、mutations
在main.js中引入store，注入:
const store = new Vuex.Store({state:{count:0   //数据源/变量源}， mutations:{add: state => state.count++  //相当于mutations中是存放操作数据源的方法的，可供组件页面触发}})
在methods中：this.$store.commit('add') //触发提交add方法

使用场景：在大型单页应用中，vue实例不再自己计算数据，而是相当于将数据操作的这一部分抽取出来，放到vuex中操作，解决了组件之间共享同一状态（数据）的问题

11、MVVM框架是什么？与jquery的区别？哪些场景适合？
MVVM：model、view、viewModel，本质上是mvc的改进，viewModel在拿出model中数据的同时处理了展示内容涉及到的业务逻辑。
mvvm使用的是数据绑定的基础架构，低耦合（分离视图和模型），可重用，