# 代理生命周期

注意

在字节跳动中使用需要注意 component 下的生命周期，它不会跟随 next() 的执行而执行

# 改变传统

为你保证所有生命周期能由路由守卫next控制，我们不得不代理启动页的所有生命周期。好处是能由开发者自由的控制执行和不执行、或者延迟多久执行。看看下面的例子：

// router.js
import store from './store'

const getData=function(){
    return axios.post({
        //...
    })
}
router.beforeEach(async (to, from, next) => {
    // 首次进来，没有数据的时候先请求数据
    if(Object.keys(store.state.globalData).length==0){
        const globalData= await getData();
        store.commit('changeGlobal',globalData);
    }
    next()
})
router.afterEach((to, from) => {
  console.log('跳转完成')
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// index.vue
<template>
	<view>
		<h1>启动页</h1>
	</view>
</template>

<script>
    import {mapState} from 'vuex'
	export default {
        computed:{
            ...mapState(['globalData'])  
        },
        onLoad(){
            console.log(this.globalData)
        }
	}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

这种例子很常见，在启动应用时需要加载一部分重要的全局参数，这部分数据需要在多个地方同时被使用。以前的做法是在 app.vue 下使用 onLaunch 请求，在 index.vue 下执行访问。但这会有一个很致命的问题，就是因为异步的原因需要写补丁才能解决，否则会出现偶尔访问有数据偶尔没有数据的BUG。当生命周期被代理后，只有全局路由守卫完全执行完成后才会执行页面及APP.vue下的生命周期，当然！你也可以停止执行生命周期，像这样做：

// router.js
router.beforeEach(async (to, from, next) => {
    next(false)
})

1
2
3
4

当在启动页执行 next(false) 后，按正常的逻辑应该是不能让页面挂载、但是在小程序上目前没有找到能代理掉启动页的方案。所以你会看到页面正常显示，但是生命周期却不会执行。这就是目前代理启动页生命周期后的现状！像 App、H5 都能完全拦截，只能正常放行后才会挂载页面。在小程序端当然你也可以用一个空白页面作为启动页，然后在全局守卫下执行 next({name:'home',NAVTYPE:'replaceAll'}) 的操作，它依旧能在视觉上给人一种挂载前空白，挂载后显示页面的效果。你还可以在启动页加入一些加载动画，都能很好的过渡掉这些问题。

# 在字节跳动中使用

目前字节跳动小程序在编译模板上 component 的执行顺序和其他所有小程序都有差异，它是在 onLoad 执行完成后再编译的 component。目前会导致 component 下的所有生命周期都无法正常代理，这里开发人员需要注意，也就是说执行顺序并不受 next() 的控制。

# 不受控制的生命周期

created
beforeMount
mounted

# 代理的生命周期

export const proxyHookName:Array<vueHookNameRule> = [
    'onLaunch',
    'onShow',
    'onHide',
    'onError',
    'onInit',
    'onLoad',
    'onReady',
    'onUnload',
    'onResize',
    'created',
    'beforeMount',
    'mounted',
    'beforeDestroy',
    'destroyed'
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

← 跳转路由锁