2020最新版前端面试题--vue面试题（观看博客可看其它面试题）

1.什么是vue的生命周期

vue实例从创建到销毁的过程就是vue的生命周期

 

2.vue生命周期的作用是什么

 

它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

 

3.第一页面加载会促发哪几个钩子

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

 

4. DOM 渲染在 哪个周期中就已经完成？

 

DOM 渲染在 mounted 中就已经完成了。

 

5. 简单描述每个周期具体适合哪些场景？

 

beforecreate : 可以在这加个 loading 事件，在加载实例时触发

created : 初始化完成时的事件写在这里，如在这结束 loading 事件，异 步请求也适宜在这里调用

 

mounted : 挂载元素，获取到 DOM 节点

updated : 如果对数据统一处理，在这里写上相应函数

beforeDestroy : 可以做一个确认停止事件的确认框

 

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

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

 

7. vue-loader 是什么？使用它的用途有哪些？

 

vue-loader 是解析.vue 文件的一个加载器。 用途： js 可以写 es6、style 样式可以 scss 或 less、template 可以加 jade 等。

 

8. v-for 为什么使用 key？

 

因为vue在更新和渲染dom的时候是根据新旧dom树进行对比的，使用key来给每个节点做一个唯一标识，diff算法就可以正确的识别此节点，找到正确的位置插入新的节点

 

9. 为什么避免 v-if 和 v-for 用在一起？

 

当vue处理指令的时候v-for比v-if具有更高的优先级，通过v-if移动到容器元素不会再重复遍历表中的每一个值，且不会在v-if为否的时候执行v-for

 

10. 虚拟 DOM 是什么？

 

虚拟 DOM”是由 Vue 组件树建立起来的整个 VNode 树的称呼。

 

 

11. vue 中利用索引修改数组的时候，页面会跟着同步吗？

 

页面不会同步，此时应用vue.set方法进行设置数据

 

12.vue首屏加载过慢应该如何解决

 

路由懒加载，会将原来打包一个 app.js 的文件打包成多个文件，异步组件，按需加载，webpack 开启 gzip 压缩，如果图片过多，开启图片懒加载，使用 cdn 资源

 

13. vue 中的单项数据流和双向数据绑定是什意思？

 

单项数据流是指数据是单向的，父组件的数据传递给子组件，只能单项 绑定，不可以在子组件修改父组件的数据

 

双向数据绑定：是指数据和页面进行双向绑定，相互影响

 

14. vue 中双向数据绑定的原理是什么？

 

主要是通过数据劫持 object.defineproperty和发布订阅者模式实现的，通过object.defineproperty监听数据发生变化，然后通知订阅者，订阅者促发响应的回调

 

15. 为什么 vue 组件中的 data 必须是函数？

 

因为如果默认为 data 是对象的话，对象为引用类型，这样的话，所有

复用的组件都是引用的同一个数据，但是如果是函数的话，每次函数都会先

创建一个新的数据，从而使每个组件的数据独立

 

16.你知道 webpack 中 babel、plugin、loader 都有什么作用吗？

babel 用来出来 es6 转 es5 ， plugin 配置 webpack 的一些插件 ， loader 用来配置解析处理第三方文件的

 

17. keep-alive 的作用？

 

<keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件

实例，主要用于保留组件状态或避免重新渲染。

 

18. vue-router 有哪几种导航钩子？

 

全局导航钩子：router.beforeEach，afterEach；组件内的钩子:beforeRouteEnter,beforeRoutrupdate,beforeRouteLeave,路由独享钩子：beforeEnter

 

19. 怎么定义 vue-router 的动态路由以及如何获取传过来的动态参数？

 

在 router 目录下的 index.js 文件中，对 path 属性加上/:id。使用 router 对象的 params.id可获取传来的参数。

 

20. active-class 是哪个组件的属性？

 

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

 

 

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

采用 ES6 的 import ... from ...语法或 CommonJS 的 require()方法引入组件，对组件进行注册，使用组件

 

22. vuex 有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module

 

23. 什么是 MVVM

 

MVVM 是 Model-View-ViewModel 的缩写。MVVM 是一种设计思想。Model 层代

表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，

它负责将数据模型转化成 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象

 

24.怎么实现权限管理的

1. 后台根据不同的用户返回不同的左侧导航菜单数据，我们进行动态展示（但是A用户通过地址栏还是能够进入B用户能够有权限访问的页面） 2.后台根据不同的用户返回不同的左侧导航菜单数据，我们进行动态展示，通过全局的路由拦截，每次进入页面之前，像后端发送请求，后端返回是否有权限访问，我们前端根据数据控制能否进入该页面 3.动态生成路由表，首先路由规则里之定义一些公共的路由规则，其他的路由规则根据后台返回的用户权限动态添加路由规则，这样的话每个用户的路由规则都是不同的 

25.vue怎么实现登录功能的

客户端点击登录，向后台发送请求，服务器通过后生成该用户的token进行返回，每个用户的token值是不一样的，客户端拿到token后要存储该token，后面请求都要携带toekn，设置请求拦截器获取本地的token传到请求头里即可，服务器校验token是否通过