Vue3组件生命周期、路由执行顺序(Note)
Vue3组件生命周期、路由执行顺序(Note)
-
vue路由执行流程
-
全局路由
-
beforeEach 前置守卫(当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中。)
-
beforeResolve 解析守卫 (每次导航时都会触发,但是确保在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被正确调用。)确定路由且组件内守卫解析后执行
-
afterEach 后置守卫 对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用
-
-
路由独享
-
beforeEnter(
beforeEnter
守卫 只在进入路由时触发,不会在params
、query
或hash
改变时触发。例如,从/users/2
进入到/users/3
或者从/users/2#info
进入到/users/2#projects
。它们只有在 从一个不同的 路由导航时,才会被触发。)
-
-
组件独享
-
beforeRouteEnter
在渲染该组件的对应路由被验证前调用 (beforeRouteEnter
守卫 不能 访问this
,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。) -
beforeRouteUpdate
在当前路由改变,但是该组件被复用时调用 (支持给next
传递回调的唯一守卫) -
beforeRouteLeave
在导航离开渲染该组件的对应路由时调用(预防用户在还未保存修改前突然离开。) -
组合式用法: 如果你正在使用组合 API 和 setup 函数来编写组件,你可以通过
onBeforeRouteUpdate
和onBeforeRouteLeave
分别添加 update 和 leave 守卫。
-
-
流程顺序
-
生动形象的例子
-
当前路径 /home-<Home>,用户在url上输入 /user/home-<UserHome>,导航被触发
-
在失活的组件里(<Home>)调用
beforeRouteLeave
守卫。 -
调用全局的
beforeEach
守卫。 -
在重用的组件里(<UserHome>)调用
beforeRouteUpdate
守卫 -
调用全局的
beforeEnter
(路由独享) -
解析异步路由组件(<UserHome>)
-
在被激活的组件里(<UserHome>)调用
beforeRouteEnter
-
调用全局的
beforeResolve
守卫 -
导航被确认 /user/home -> <UserHome>
-
调用全局的
afterEach
钩子 -
触发 DOM 更新
-
调用
beforeRouteEnter
守卫中传给next
的回调函数,创建好的组件实例会作为回调函数的参数传入。
-
-
-
-
vue组件生命周期
-
onBeforeMount() 挂载之前
-
dev onRenderTracked() 渲染过程中追踪到响应式依赖
-
dev onRenderTriggered() 响应式依赖的变更触发组件渲染
-
onMounted() 挂载完成
-
onBeforeUpdate() 更新之前
-
onUpdated() 组件更新
-
onBeforeUnmount() 卸载之前
-
onUnmounted() 卸载之后
-
onErrorCaptured() 后代组件错误时执行
-
onActivated() 组件实例是缓存树的一部分,当组件被插入到 DOM 中时调用。
-
onDeactivated() 组件实例是缓存树的一部分,当组件从DOM 中移除时调用。
-
ssr onServerPrefetch() 组件实例在服务器上被渲染之前调用。
-
更多推荐
所有评论(0)