从分析Vue实例生命周期开始,剖析Vue页面跳转背后执行过程

文章目录

- 1.概要
- 2.Vue实例生命周期
- 3.生命周期函数解释
- 4.存在父子组件情况页面执行过程
- 5. 分析路由跳转页面执行过程
- 6.扩展补充
- 7.小结

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组件激活触发钩子函数

下面结合一个简单例子讲述，比如一个页面某个位置动态展示两个不同子界面，
并且需要对子界面进行缓存，即子界面动态切换时，仍然保留之前的数据状态，以使用keep-alive组件进行包裹。其中截图Child、Child2声明为两个子组件。
动态组件展示可以使用component 组件is 属性来判断切换组件。下图就是2个组件分别名称为Child,Child2,根据state变量值来动态渲染。

在这里插入图片描述

假设当前state从false状态变为true，此时先让Child2组件失活，在激活Child组件。
先调用Child2组件的OnDeactivated函数，再调用Child组件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()例外。这个路由跳转过程中又触发了那些函数操作呢？

1.触发路由导航router.push(）或者router.replace()方法或者是使用`标签，其中replace方法不会讲路由加入至路由history中。
2.在失活的组件内调用beforeRouteLeave 守卫
3.调用全局前置守卫beforeEach
4.重用组件调用beforeRouteUpdate守卫
5.调用路由配置的beforeEnter守卫
6.激活组件内调用beforeRouteEnter 守卫
7.调用全局后置守卫afterEach
8.DOM更新
9.调用beforeRouteEnter 传给next()方法回调函数，组件实例作为参数传递。

这里着重讲几个最常用的守卫。
全局前置守卫 beforeEach：通常用于请求拦截，token校验，比如用户登录或者是会员登录信息校验，可以放在这里进行校验。
针对单个路由组件进行额外的处理，使用beforeEnter或者beforeRouteEnter 守卫。
beforeRouteUpdate 用以一个通用组件，针对不同参数频繁渲染的组件的钩子函数。

next()放行函数,为空表示啥也不做，这里书写具体的逻辑，是直接放行还是重定向还是返回错误信息等，都是使用next()钩子函数来完成，常见 next({path:'/home'}) 表示路由重定向/home路由 next(false) 表示中断路由导航

6.扩展补充

Vue3虽然兼容Vue2，但为了代码可读性、扩展性、可维护性，建议尽量不要混合使用，Vue3钩子函数需要放到setup函数中，且一个Vue文件最多只能有一个setup。混合使用过程中，Vue2方法可以访问setup内部对象，但是setup无法获取Vue2的对象。

Vue3是Vue2的升级版，性能得到极大提升，打包体积减少41%，初次渲染快55%，内存减少54%，相比Vue2开发更加高效，运行速度更快。适用于新项目开发。但目前兼容性不如Vue2，所以老项目依旧采用Vue2进行开发维护。

Vue3与Vue2最大的不同点在于：
Vue3引入了组合式API和函数式编程，更加高效实现数据响应式。
Vue3采用Proxy代理实现数据响应式，Vue2采用defineProperty实现数据响应式。Vue3代理方式解决了某些情况下Vue2数据更新页面未同步更新的问题。比如一个数组通过下标修改数据，Vue2语法下绑定该数组的对象页面不会自动更新，需要额外手动设置this.$set/Vue.set触发更新。