前端笔试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属性。绑定事件：<input @click=doLog() />

    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对象

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