今天我们来聊聊Vue中的钩子函数， 例如生命周期的钩子函数，常见的 Vue.js 生命周期钩子包括 、、、、、、 和 。

再是路由的钩子函数以及

所谓生命周期就是让函数在页面加载的过程中去自动执行，而这些生命周期钩子函数都是去接受一个回调函数。

那么我们就可以将函数放在这些生命周期钩子函数中，去控制它们什么时候执行。

首先，我们在中写入一段代码时，那么Vue就会先去编译这段，编译完之后经过一系列操作然后进行一个挂载，然后生命周期就会去执行。

该钩子函数在组件挂载之前被调用，注意: 这个钩子在服务器端渲染期间不会被调用。

该钩子函数在组件挂载完成后被调用，同样，这个钩子在服务器端渲染期间不会被调用。

这段代码的打印顺序是怎么样的呢？

首先，先执行的是全局的,这个执行是在编译之后执行的，全局函数最优先执行，所以打印。

当模板完之后，进行挂载，那么再挂载之前,执行，所以打印。

再挂载时，执行，所以，执行。

如果我们想要获得拿到一个DOM结构，那么在哪个生命周期可以拿到呢？

这里我们通过去获得一个标签的结构，并且在全局和两个生命周期中都去获取DOM结构。

我们发现，只能在挂载完成中去获取一个元素的DOM结构。

只有挂载了之后，我们才能去获取元素的结构，而在全局中和在组件挂载之前我们是并不能去获取DOM结构的。

再拓展一下：如果我们向后端发送一个网络请求，那么这段请求代码放在哪里执行比较合适呢？

其实以上三个地方放哪里都可以，但是我们一般会放在onMounted当中，因为请求到的数据可能会对DOM结构进行操作。

该钩子函数在页面卸载时的时候执行，也就是离开页面的时候。

可以在这个钩子中手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接。

这个钩子在服务器端渲染期间不会被调用。

该钩子函数在页面卸载之前执行。

当这个钩子被调用时，组件实例依然还保有全部的功能。

这个钩子在服务器端渲染期间不会被调用。

该钩子函数在组件因为响应式状态变更而更新其 DOM 树之后调用。

这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的，因为多个状态变更可以在同一个渲染周期中批量执行 (考虑到性能因素)。如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代。

通过将变成响应式数据，点击标签时，值+1。

在响应式状态变更时执行，所以，我们每次将值增加，都会打印一遍。

该钩子函数在组件即将因为响应式状态变更而更新其 DOM 树之前调用。

这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。

这个钩子在服务器端渲染期间不会被调用。

用法跟一样。

路由的钩子函数一般写入路由配置文件中，我们也可以写入中进行配置。

该钩子函数接受三个参数。

表示我们想要跳转到的页面

表示我们从哪个页面跳转过来

表示跳转

这里我们先去创建一份路由， 有两个页面， 一个是, 一个是。

这就是我们的页面，当我们点击关于跳到页面时:

第一行打印，也就是我们想要去到的地方

第二行打印，也就是我们来的地方。

当用户想要去其他页面时，我们可以使用这个钩子函数去判断用户有没有登录，如果没有登录就送他去登录页面。

并且我们还可以使用此钩子去给页面设置一个标题。

这里我们通过一个简单的办法来模拟一下：

如果用户登录了，我们就在本地存储当中存入用户信息。

先使用去判断用户是不是想去非登录页面，如果是的话，就去检查当中是否有用户信息。如果没有的话，就不使用进行一个跳转，并弹出一个警告。

如图，注意看,我们这里点击关于页面，那么它本该会跳去

但是通过路由守卫判断出我们并没有登录，所以弹出警告，跳转失败。

我们看左上角，发现多了一个标题,这是因为我们在路由配置中加入了，去设置一个路由的详细信息。

然后通过，这样就实现了一个标题。

但是这样去判断一个用户是否登录是不严谨的，用户可以手动的去中设置一个为的字段。

解析钩子和全局前置区别不大，解析钩子是在路由被解析，代码被编译之前触发。

我们同样可以使用该钩子去处理上面的事情。

它只有两个参数, 和

该方法表示路由跳转后去干什么事情，它没有参数

同样和表示去哪和从哪来。

上面我们所介绍的三个全局钩子函数， 它们是全局的，我们只要用了这三个钩子中的任意一个，那么它将会影响项目中所有路由的跳转。

接下来我们来看看独享守卫。

独享守卫是什么意思？

在有些场景，我们希望跳去某些页面时，钩子触发，而跳去别的页面时，钩子不触发。

比如，我们只想跳到关于页面去触发钩子函数，那么我们只需要在的路由配置中加入。

同样，, , 的作用都是与全局守卫钩子相同。

从跳去：

从跳去:

可以看出，是没有触发钩子函数的。

我们还可以想象一个场景:

假设一个项目有一百个页面，只有一个页面才需要登录后才能查看，那么我们只需要给那个页面单独配置一个, 去进行一个判断是否登录的逻辑。

它可以用来在我们离开时做的一个操作。

比如我们常见的: 当我们跳转一个页面时，浏览器弹出一个: 你确定要离开该页面吗？

我们将该钩子写在组件中，当我们跳转到时,该钩子触发:

当我们两个页面共同用到了一个组件时，当它们进行相互跳转时，那么该钩子函数就会触发。

在我们去开发一个Vue项目中的时候，若是两个页面共用到了一个组件，当跳转页面时，这个共用的组件也是会进行再次渲染的。因为跳转路由的时候页面内所有组件都是会重新销毁并加载的。

但是很多组件是没有必要再次渲染的，这样可以减少性能开销。

比如每个页面都有广告，且广告的内容是一样的，如果每次去重新加载该广告组件也是没有必要的。我们为了减少一个性能开销，就可以使用`keep-alive'

的作用就是包裹一个需要去缓存的组件。

首先我们有两个页面，一个首页页面，一个关于页面,首页中我们加入去检测是否重新加载了这个组件。

我们在中使用去缓存首页页面:

首先，我们进入到首页页面:

可以看到是执行了,因为组件是初次加载，加载完之后才会缓存。

然后我们再跳转到关于页面。

然后我们从页面跳到首页时，再看打印:

发现我们成功缓存住了首页组件，没有触发。

当被缓存的组件生效时触发

当离开缓存的组件时触发

这两个钩子一定根缓存有关， 所以一定要跟一起使用

同样，我们利用上面的代码来举例:

我们在首页组件中加入这两个钩子函数

当我们进入首页页面, 触发，因为被缓存的组件生效了

当我们进入关于页面, 触发，因为我们离开了缓存的组件

若是在面试的时候，面试官有提到生命周期，那么提到两个跟缓存有关的钩子是十分加分的，因为往往我们在学习前端的过程中容易去忽视掉这两个钩子函数。

写文章不易，如果帮助到了小伙伴们，可以给本文点赞收藏评论三连呀。有不懂的地方欢迎到评论区留言，我会及时回复。