前端必掌握的Vue理论知识

什么是vue⽣命周期?

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

vue⽣命周期都有哪些钩⼦函数?

常用的生命周期函数应该有8个，分比为：

创建前后：beforeCreate、created

1. beforeCreate：在实例创建之前，我们是拿不到data和methods里面的数据和方法的，更没有this，因为vue实例还未创建完成。
2. created：在势力创建之后，我们可以最早的拿到data和methods里面的数据和方法的，可以使用this。

挂在前后：beforeMount、mounted

1. beforeMount：在组件挂载之前，页面结构是虚拟DOM树，所有的元素都是虚拟DOM。
2. mounted：在组件挂载之后，页面结构是真实DOM树u，所有的元素都是真实DOM，我们可以在这个时间段获取DOM节点，对他进行操作。

更新前后：beforeUpdate、updated

1. beforeUpdate：在组件数据更新之前，数据变了，视图没变。
2. updated：在组件数据更新之后，数据变了，视图也变了。

销毁前后：beforeDestory、destoryed

1. beforeDestory：在组件销毁之前是最后一个可以使用data和methods的钩子函数了。
2. destoryed：在组件销毁之后，整个vue实例的一个过程就结束了。

不常用的钩子函数有3个分别为：

如果用keep-alive缓存了组件，就会有actived、deactived这两个钩子函数

1. actived：组件激活时调用
2. deactivated：组件停用时调用
3. errorCaptured：子组件出错的时候会触发这个钩子函数

这些钩⼦函数如何触发?

页面一加载，就会触发vue实例创建前后和组件挂载前后的钩子函数，当视图中的数据发生改变时，会触发更新的钩子函数，当组件进行切换的时候，就会触发销毁的钩子函数。

实用场景？

我在项目开发中，我经常使用created和monuted这两个声明周期函数，created里面向后台发送请求，获取数据，也可以在这里获取本地存储的数据；而在monuted钩子函数里面，我经常获取DOM节点，虽然有时获取不到，我就会通过$nextTick()来获取DOM节点。

⻚⾯第⼀次加载时⽗⼦组件⽣命周期执⾏的顺序是什么?

首先执行父组件的beforeCreate-->created-->beforeMount==>

然后执行子组件的beforeCreate-->created-->beforeMount->mounted==>

最后执行父组件的mounted

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

vuex就是vue官方给我们提供的一个状态管理工具，用于解决组件之间数据共享的问题。

vuex的五⼤核⼼是什么?

state：里面存放的是状态（数据）

getters：计算属性，有点儿类似于我们vue里面的compted计算属性

mutations：它的主要作用就是修改state里面的数据，有点类似于我们vue里面的methods方法,mutations只能使用同步操作

actions：它的里面主要用于网络请求，可以异步操作

modules：主要用于模块化开发，在项目中，通常会将多个状态抽离到js文件，最后合并到modules中，这样方便后期的维护。

在组件⾥⾯如何调⽤五⼤核⼼的属性和⽅法?

state：通过this.$store.state可以访问到里面的数据

mutations：通过this.$store.commit触发

getters：通过this.$store.getters访问计算属性

actions：通过dispatch可以异步修改state里面的数据

通过辅助函数的方式来进行调用和触发（mapState、mapGetter、mapMutation、mapAction）

vuex的执⾏机制是什么?

如果我们想要改变state里面的状态，首先通过dispatch触发actions里面的方法，在通过commit来调用mutations里面定义的方法改变state，这就是vuex的运行机制。

vuex的弊端是什么?怎么解决?

vuex的弊端就是浏览器页面一刷新，数据就会丢失，我们一般结合本地存储来解决，通过localStorage或者sessionStorage将数据存储在本地，或者使用插件vuex-persist或者vuex-persistedstate进行存储。

vue路由有⼏种模式?

vue路由有两种模式。

路由模式的区别有什么区别?

第一种是hash模式，带有#字符，不会包含在http请求中，并且hash模式不会重新加载页面；

第二种是history模式，如果前端url和后端的url不一致的话，会报404错误，这就需要前端和后端进行配合。

history路由模式原理是什么?

就是利用html5新增的两个特性方法，分别是pushState()和replaceState()来完成的。

vue路由守卫?

vue一共给我们提供了三种路由守卫

第一种是全局路由守卫：

• beforEach（全局前置守卫）、beforeResolve（全局解析守卫）、afterEach（全局后置守卫）

第二种是组件级路由守卫：

• beforeRouteEnter（进入路由之前）、beforeRouteUpdate（路由更新之前）、beforeRouteLeave（路由离开之前）

第三种是路由独享守卫：

• beforeEnter
• 除了afterEach之外的路由守卫有三个参数，分别是to，from，next，分别是要进入的路由，离开之前的路由，进入下一个路由。

v-if与v-show的区别?

v-if有更高的切换消耗；是动态的创建和销毁的一个过程。

v-show有更高的初始渲染消耗；是通过css样式display:none或display:block来控制显示和隐藏的。

所以说在频繁切换的的情况下，使用hidden更为合适，如果是条件判断就使用v-if。

v-for与v-if的优先级那个⾼?如果同时使⽤v-for和v-if怎么解决?

v-for的优先级更高，因为v-for渲染的时候，DOM还未渲染完毕，这个v-if还无法判断；

在循环的外层包裹一层div或者template，将v-if放置外层。

methods、computed和watch的区别?

methods:是一个用来定义方法的选项对象，不会被缓存；

computed:计算属性，结果会缓存，当结果值发生改变，结果值会再次缓存；

watch:监听属性，用于监听data里面的数据，当数据发生改变就会触发，不会被缓存；