前端笔试vue面试题必问题和答案（vue常见面试题必问大全）

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

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

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

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

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

   
答：三种，一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判 断拦截。第二种：组件内的钩子；第三种：单独路由独享组件

   
4、scss是什么？安装使用的步骤是？有哪几大特性？

   
答：预处理css，把css当前函数编写，定义变量,嵌套。 先装css-loader、node-loader、 sass-loader等加载器模块，在webpack-base.config.js配置文件中加多一个拓 展:extenstion，再加多一个模块：module里面test、loader

   
使用步骤：

   
第一步：用npm 下三个loader（sass-loader、css-loader、node-sass）

   
第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个 拓展.scss

   
第三步：还是在同一个文件，配置一个module属性

   
第四步：然后在组件的style标签加上lang属性 ，例如：lang=”scss”

   
有哪几大特性:

   
1、可以用变量，例如（$变量名称=值）；

   
2、可以用混合器，例如（）

   
3、可以嵌套

   
5、mint-ui是什么？怎么使用？说出至少三个组件使用方法？

   
答：基于vue的前端组件库。npm安装，然后import样式和js，vue.use（mintUi） 全局引入。在单个组件局部引入：import {Toast} from ‘mint-ui’。组件一：Toast(‘登 录成功’)；组件二：mint-header；组件三：mint-swiper

   
6、v-model是什么？怎么使用？ vue中标签怎么绑定事件？

   
答：可以实现双向绑定，指令（v-class、v-for、v-if、v-show、v-on）。vue的model 层的data属性。绑定事件：

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

   
答：请求后台资源的模块。npm install axios -S装好，然后发送的是跨域，需在配置文件 中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。js中使用import 进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中

   
8、axios+tp5进阶中，调用axios.post(‘api/user’)是进行的什么操作？axios.put(‘api/user/8′)呢？

   
答：跨域，添加用户操作，更新操作。

   
9、什么是RESTful API？怎么使用?

   
答：是一个api的标准，无状态请求。请求的路由地址是固定的，如果是tp5则先路由配置中把资源路由配置好。标准有：.post .put .delete

   
10、vuex是什么？怎么使用？哪种功能场景使用它？

   
答：vue框架中状态管理。在main.js引入store，注入。新建了一个目录store，….. export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

   
11、mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？

   
答：一个model+view+viewModel框架，数据模型model，viewModel连接两个

   
区别：vue数据驱动，通过数据来显示视图层而不是节点操作。

   
场景：数据操作比较多的场景，更加便捷

   
12、自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？

   
答：全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives

   
钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）

   
钩子函数参数：el、binding

   
13、说出至少4种vue当中的指令和它的用法？

   
答：v-if：判断是否隐藏；v-for：数据循环出来；v-bind:class：绑定一个属性；v-model：实现双向绑定

   
14、vue-router是什么？它有哪些组件？

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

   
15、导航钩子有哪些？它们有哪些参数？

   
答：导航钩子有：a/全局钩子和组件内独享的钩子。 b/beforeRouteEnter 、afterEnter 、

   
beforeRouterUpdate 、 beforeRouteLeave

   
参数:有 to( 去的那个路由 )、 from( 离开的路由 ) 、next( 一定要用这个函数才能去到下

   
一个路由,如果不用就拦截 )常用就这几种。

   
16.vue在created和mounted这两个生命周期中请求数据有什么区别呢？

   
若涉及页面加载，在created的时候，视图中的html并没有渲染出来，所以这个时候如果直接去操作dom节点，一定找不到相关元素。

   
而在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点。

   
17.watch和计算属性有什么区别？

   
如果一个数据需要经过复杂计算就用 computed

   
如果一个数据需要被监听并且对数据做一些操作就用 watch

   
计算属性（computed）

   
属性检测（watch）

   
首次运行

   
首次不运行

   
为了应对复杂的逻辑计算 对数据的变化作出反应

   
只有当缓存改变时才执行 只要从新渲染就会执行

   
有缓存 没有缓存

   
18.删除数组用delete和vue.delete有什么区别？

•            
  delete：只是删除数组成员变为empty/undefined，其他元素键值不变

•            
  vue.delete：直接删除了数组成员，并改变了数组的键值

   
19.vue项目实现路由按需加载（路由懒加载）的3中方式

•            
  vue异步组件

•            
  路由懒加载(使用import)

•            
  webpack提供的require.ensure()

   
20.vue项目前端性能优化

•            
  路由懒加载（当路由被访问时才加载对应组件）

•            
  打包优化（不生成.map文件）

•            
  切换多入口模式

•            
  使用字体图标代替切图

•            
  使用雪碧图（见多张图片合并到一张图片中）

•            
  提取公共样式和方法

•            
  控件销毁

•            
  路由离开时及时销毁路由离开时及时解绑事件

•            
  使用keep-alive

•            
  合理利用vue的生命周期（减少在created中做ajax请求，而是放在mounted中，以不堵塞页面生成dom）

   
21.vuex是什么？如何使用？在哪种功能场景中使用？

   
vuex是一个专为vue.js应用程序开发的状态管理模式

   
为了使用vuex，要引入store，并注入vue.js组件中，在组件内部即可通过$ostore访问store对象

   
在单页面应用中，用于组件之间的通信，例如音乐播放、登录状态管理、加入购物车等。