vue钩子函数执行顺序（vue11个钩子函数）

科技前沿 • 2025-04-26 20:42 • 阅读 42

大家好，我是讯享网，很高兴认识大家。

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <p><strong>VUE生命周期中的钩子函数及父子组件的执行顺序</strong></p>

讯享网

在这里插入图片描述
讯享网
在vue实例的整个生命周期的各个阶段，会提供不同的钩子函数以供我们进行不同的操作。先列出vue官网上对各个钩子函数的详细解析。

讯享网

vue-router的导航守卫实际和组件的生命周期都是同一类型的钩子函数，在一个特定时间内会触发。

导航守卫有三个类型，分别是全局路由守卫 和 路由独享守卫和组件内的钩子。

三个参数：

模块一：全局导航钩子函数

1、vue router.beforeEach（全局前置守卫）

beforeEach的钩子函数，它是一个全局的before 钩子函数，（before each）意思是在每次每一个路由改变的时候都得执行一遍。

应用场景：可进行一些页面跳转前处理，例如判断需要登录的页面进行拦截，做登录跳转！！

讯享网

2、vue router.afterEach（全局后置守卫）

router.beforeEach 是页面加载之前，相反router.afterEach是页面加载之后

模块二：路由独享的守卫(路由内钩子)

你可以在路由配置上直接定义 beforeEnter 守卫：

模块三：组件内的守卫(组件内钩子)

1、beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

讯享网

讯享网

讯享网

路由钩子在实际开发中的应用场景

(一) 清除当前组件中的定时器

当一个组件中有一个定时器时, 在路由进行切换的时候, 可使用beforeRouteLeave将定时器进行清楚, 以免占用内存:

讯享网

(二) 保存相关内容到Vuex中或Session中

当用户需要关闭页面时, 可以将公用的信息保存到session或Vuex中

完整的导航解析流程

导航被触发。
在失活的组件里调用 beforeRouteLeave 守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

vue钩子函数执行顺序（vue11个钩子函数）

相关推荐