文章目录
1.概要
本文旨在分析Vue页面进行路由切换时，Vue背后的运行过程，旨在让大家更加清晰地明白Vue页面运行过程中钩子方法的执行顺序，有利于大家更高效地完成前端开发任务。
2.Vue实例生命周期
提示：这个Vue项目运行时会构建Vue实例，这个还不清楚的，需要自己补充Vue基础知识
Vue2和Vue3生命周期流程图
3.生命周期函数解释
下面以Vue3为例子进行解释,Vue3不仅包含Vue2对应生命周期函数，且额外新增了setup函数，运行在所有生命周期函数之前。
1.setup函数
Vue3新增的一个函数，相当于Vue2的beforeCreate和created钩子函数,由于Vue3是兼容Vue2写法，因此setup会在这两个钩子函数之前执行。通常在setup函数内部定义所有钩子函数以及初始化 js/ts 变量，具体行为在对应的钩子函数和自定义函数中。
2.OnBeforeMount函数
这个是DOM树尚未完成挂载至浏览器页面中，此时对DOM操作是无效的。因此不能在这个周期函数内操作DOM元素，会失效。
3.OnMounted函数
这个函数表明浏览器已经完成对DOM元素的挂载渲染了，此时可以拿到DOM元素并进行DOM操作，一般书写页面初次进入，挂载DOM树完成后所需要执行的DOM操作，都在这个钩子函数中。注意：页面刷新会触发挂载操作，但是组件刷新通常不会触发这个函数执行。
4.OnBeforeUpdate函数
这个就是单个页面某个部分刷新时触发的钩子函数，比如页面由3个组件合并而成，其中如果某一个组件状态发生变化，则会触发这个钩子函数。这个在页面组件更新前执行。
5.OnUpdated函数
这个和OnBeforeUpdate一起触发，这个是页面更新后 后置处理函数。
6.OnDeactivated、OnActivated函数
OnDeactivated组件失活触发钩子函数，OnActivated组件激活触发钩子函数
这个方法执行过程中，是在当前父组件OnBeforeUpdate 和 OnUpdated之间执行。
7.OnBeforeUnmount/OnUnmounted函数
onBeforeUnmount组件开始卸载之前执行，OnUnmounted组件完全卸载后执行。
通常用于取消定时器、移除事件监听器等操作。
OnUnmounted组件完全卸载之后执行，通常用来重置状态、移除全局事件监听器等清理工作。这两个过程用以组件卸载时清理工作，有效书写可避免内存泄漏。
4.存在父子组件情况页面执行过程
之前生命周期是针对单个组件，默认没有父子组件情况下的执行流程。实际开发中，一个复杂的页面通常是多个组件合成一个view视图，并且组件内部可以嵌套组件，此时页面加载执行顺序是如何的呢？
下面以一个只包含2个子组件的父组件的执行流程来做个简要分析。刷新页面直接看截图效果。
.vue 文件【大家忽略其他属性信息】
其中在每个组件内钩子函数书写了函数对应的console.log()信息，执行截图如下。
- 执行流程分别是父组件 setup->beforeCreate->created->onbeforeMount
- 按照书写顺序依次加载Child组件 setup->beforeCreate->created->onbeforeMount
- 按照书写顺序依次加载Child2组件 setup->beforeCreate->created->onbeforeMount
- 依次挂载Child 、Child2 组件，最后挂载当前父组件。
5. 分析路由跳转页面执行过程
`
前面已经分析了单组件页面、带有父子组件页面执行逻辑，实际开发中，页面与页面之间切换大部分是通过路由跳转来实现的，当然window.open()例外。这个路由跳转过程中又触发了那些函数操作呢？
这里着重讲几个最常用的守卫。
全局前置守卫 beforeEach：通常用于请求拦截，token校验，比如用户登录或者是会员登录信息校验，可以放在这里进行校验。
针对单个路由组件进行额外的处理，使用beforeEnter或者beforeRouteEnter 守卫。
beforeRouteUpdate 用以一个通用组件，针对不同参数频繁渲染的组件的钩子函数。
6.扩展补充
7.小结
本问旨在分析Vue3情况下页面切换下整个Vue文件执行过程，最后结尾补充了Vue3和Vue2做了个简单的对比。希望能给大家带来一点帮助，文中书写如有错误，请于评论中交流指正。
