分享十道前端面试题 vue2篇

1.vue生命周期相关

1.1什么是vue生命周期？

    vue实例从创建到销毁的整个过程就是vue生命周期，通过vue生命周期可以在不同阶段进行不同的逻辑操作。

1.2vue生命周期有哪些钩子函数？该如何触发？

     vue生命周期常用的钩子函数一共有8个，分别是

   创建阶段：

beforeCreate =>实例创建之前，什么也不能用
created => 实例创建之后  可以使用data或者methods的钩子函数
beforeMount => 组件挂载之前
mounted => 组件挂载之后

    运行阶段： 

   beforeupdate => 数据变了，视图还没改变
   updated => 数据变了，视图也改变

    销毁阶段：   

beforedestory => 组件销毁之前，是最后一个能使用data和  methods钩子函数
destoryed => 组件销毁之后

    除了这八个，还有三个（不常用）

    如果用keep-alive缓存了组件，会新增了两个钩子函数：activated和deactivated   

activated => 组件激活
deactivated => 组件停用
errorCaptured => 子组件出错的时候会触发这个钩子函数

1.3 在项目开发过程中，在生命周期里面都做过什么功能？

    我经常用到的有created和mounted，在里面发送http请求

    created和mounted的区别就是created比mounted执行的时间更早，所以更多的会在created中请求，mounted的特点是可以操作dom节点，也会用created来获取本地存储的数据

1.4页面第一次加载的时候父子组件生命周期执行的顺序是什么？   

页面—beforeCreate
页面—created
页面—beforeMount
组件—beforeCreate
组件—created
组件—beforeMount
组件—mounted
页面—mounted

2. 对vuex的理解? 

2.1 什么是vuex?使⽤vuex能够解决什么问题?

        vuex其实就是vue官⽅给我们提供的⼀个状态管理⼯具,通过vuex我们可以实现组件之间数据共享

2.2 vuex的五⼤核⼼是什么?

state：保存状态，存放数据
getters：相当于计算属性
mutations：修改state里面的数据，只能进行同步操作
actions：可以改变state的状态，定义的方法可以进行异步操作
modules：进行模块化处理

2.3 在组件里面如何调用五大核心的属性和方法？

state：通过this.$store.state来调用

getters：通过this.$store.getters来调用

mutations：通过this.$store.commit调用

actions：用过this.$store.dispath调用

modules：模块化

2.4 vuex的执⾏机制是什么?

在项目中如果要改变state的状态，我们一般都是在组件里面调用this.$store.dispath方式来触发actions里面的方法，在actions里面的方法通过commit来调用mutations里面定义的方法来改变state，这也是vuex的执行机制

2.5 vuex的弊端是什么？怎么解决？

在刷新页面的时候vuex的数据会丢失，可以通过本地存储或者安装vuex持久化插件vuex-persist去实现自动本地存储

3.vue路由有几种模式？有什么区别？原理是什么？

vue的路由模式一共分为两种，分别是hash和history，他们的区别是hash模式不会包含在http请求中，并且hash不会重新加载页面，而使用history模式的话，如果前端的url和后端发起请求的url不一致的话会报404错误，所以使用history模块的话我们需要和后端进行配合.

        history的原理就是利用html5新增的两个特性方法，分别是pushState和replaceState来完成的.

4.vue路由守卫？讲解页面权限

        路由的导航守卫又叫做路由的钩子函数（生命周期函数），就是在跳转页面的时候拦下来，做一些操作，再放行

一共分为三种：

第一种是全局守卫：

beforeEach 路由进入之前

afterEach 路由进入之后

第二种是组件内守卫

beforeRouteEnter 路由进入之前

beforeRouteUpdate 路由更新之前

beforeRouteLeave 路由离开之前

第三种是独享守卫

beforeEnter 路由进入之前

        比如说购物车页面只有登录后才能访问，我们可以使用组件守卫，守卫购物车页面，跳转的时候先判断，判断有没有登录时存入的token，有的话就放行，没有的话就跳转到登录页面

5.v-if和v-show的区别？

他们两个都是控制元素的显示与隐藏，不过v-if控制元素隐藏的时候会删除对应的dom元素，当控制显示的时候会重新创建dom和渲染；v-show是通过css的display：none和display：block来控制元素的显示和隐藏，所以涉及到频繁显示隐藏的操作建议用v-show，不频繁操作的可以用v-if

6.v-for和v-if的哪个优先级高？如果同时用的话怎么解决？

v-for的优先级高，因为v-for的时候才开始渲染dom元素，v-if还无法进行判断

v-for和v-if不能同时使用，同时用的话vue会提示v-if应该放到外层去

 7.methods、computed和watch的区别？讲解

methods是用来定义方法的区域，methods定义的方法需要调用才能触发，不具备缓存

而computed是计算属性，依赖于属性值的变化，当属性值发生改变的时候，计算属性里面定义的方法就会出发，具有缓存性，根据属性值的变化而变化

watch主要用于监听，不具备缓存性，依赖于数据变化而变化

在项目中，比如我们获取state的状态的时候会把它放到computed里面，或者在写购物车数量计算的时候也会使用计算属性

watch也在项目中经常使用，比如我们封装编辑和新增弹窗组件的时候会通过watch来进行id判断我们是否要清空表单的数据

 8.vue组件通信？eventBus讲解

父传子   在子组件的标签上定义属性，子组件通过props来接收，可以通过数组的方式进行接收，也可以通过对象的方式来接收，如果父组件没有传递属性，子组件可以用default来设置默认值

子传父   子组件通过this.$emit('自定义的事件'，要传给父组件的数据)，父组件通过子组件标签监听自定义的事件，通过方法来接收传递的数据

非父子组件通信

通过中央事件总线，我们称之为eventBus

我们需要创建一个空的js文件，在这个文件里面创建空的vue实例，然后导出这个空的vue实例，通过实例对象调用.on方法进行接收，通过emit方法来进行发送，以上就是非父子组件通信的方式

9.$nextTick方法有什么作用？讲解

nextTick也叫做异步更新队列方法，而nextTick方法的主要作用就是等待dom元素加载完毕之后才会执行的回调函数，我们经常在nextTick方法里面获取dom元素

10.说一下什么是mvvm模式？

MVVM是把MVC的Controller和MVP的Presenter改成了ViewModel

View的变化会自动更新到ViewModel，ViewModel的变化也会自动同步到View上显示，这种自动同步是因为ViewModel中的属性实现了Observer，当属性变更时都能触发对应的操作