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

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函数
这个就是单个页面某个部分刷新时触发的钩子函数