mpvue、微信小程序生命周期详解

素颜马尾好姑娘i 2021-10-01 05:58 451阅读 0赞

`mpvue继承自Vue.js,其技术规范和语法特点与 Vue.js保持一致，所以具备vue知识储备的同学用mpvue开发小程序很快就能上手。我觉得mpvue比较容易混淆的就是生命周期，mpvue除了Vue 本身的生命周期外,还兼容了小程序的生命周期,接下来就通过实例讲解一下生命周期的执行顺序。`

`一、生命周期分三个部分`

`app生命周期+vue生命周期+小程序自有生命周期，所以我会把这三个类型的生命周期通过console打印出来，通过page-app、page-index（首页）、page-user（个人中心）和page-detail（详情页）区分不同页面,其中index和user是tabBar标签,detail是index的详情页``。`

①在app.vue页面，打印app级别生命周期

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70][]

②在首页打印vue生命周期和`小程序自有生命周期`

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 1][]

③个人中心页和detail页也是一样打印

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 2][]

二、通过打印信息，看执行顺序

①初次加载页面进入首页时的生命周期显示，刚好看到可以分为三部分，具体看下面的图

1、首先是app级别的生命周期 onLanunch和onShow(无论后面页面如何跳转，只在app进来只执行一次)，此生命周期可以用来获取微信场景值，[https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/scene.html][https_developers.weixin.qq.com_miniprogram_dev_framework_app-service_scene.html]

2、在app.json->pages中定义的页面,beforeCreatre、created生命周期都会按照pages中的顺序依次先执行，而且也是在app初始化后只执行一次，所以原来我们在vue 发起ajax请求的操作不宜放在created中，可以放在页面级别的onShow生命周期比较合适。

3、小程序生命周期onLoad onShow onReady --->vue生命周期 beforeMount、mount

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 3][]

②那从 首页 跳转到 个人中心页的生命周期怎么走？（此次操作是通过tabBar跳转）,这里可以了解一下 小程序路由跳转的几种区别。可参考官网：[https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html][https_developers.weixin.qq.com_miniprogram_dev_framework_app-service_route.html]

也是分为了三部分，具体看图，需要注意的是 从首页到个人中心页面，首页的vue destroyed销毁生命周期并没有走，所以需要销毁定时器等耗时任务的放在这个生命周期没有用，可以理解为页面只是隐藏了，并没有销毁。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 4][]

③从首页跳转到详情页，通过wx.navigateTo的形式跳转，发现比通过tabBar跳转形式少了一个触发onTabItemTap的周期。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 5][]

④从详情页点击左上角的返回按钮生命周期怎么走？可以发现只有两个生命周期触发了，detail的onUnload和首页的onShow。onUnload走了，相当于原来vue 的destory，可以做一些销毁操作，比较重要的是onShow生命周期，发现无论是从首页到详情页还是通过tabBar跳转或者是返回或者是按home键后再次返回，都会触发，所以在页面级别的onShow做数据初始化ajax请求比较合适。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 6][]

⑤点击home键，退出页面后，再次回来，生命周期怎么走？

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 7][]

以上是一些用的比较多的场景，还有一些没考虑到的可以自己去打印一下，大家可以试一下。

发现可以得出一个初步结论，用mpvue开发可以使用vue的开发方式（比如vuex,双向数据绑定等），但生命周期适合用微信小程序的生命周期。

我把生命周期打印的格式贴出来

// vue 生命周期 
    beforeCreate () {
    	console.log('vue [page-index] beforeCreate')
    },
    created () { 
    	console.log('vue [page-index] created') 
    },
    beforeMount () { 
    	console.log('vue [page-index] beforeMount') 
    },
    mounted () { 
    	console.log('vue [page-index] mounted') 
    },
    beforeUpdate () { 
    	console.log('vue [page-index] beforeUpdate')
    },
    updated () { 
    	console.log('vue [page-index] updated') 
    },
    activated () { 
    	console.log('vue [page-index] activated, mpvue 实际运行并没有回调, 原因不支持 keep-alive')
    },
    deactivated () {
    	console.log('vue [page-index] deactivated, mpvue 实际运行并没有回调, 原因不支持 keep-alive') 
    },
    beforeDestroy () {
    	console.log('vue [page-index] beforeDestroy, mpvue 实际运行并没有回调, bug')
    },
    destroyed () { 
    	console.log('vue [page-index] destroyed, mpvue 实际运行并没有回调, bug') 
    },
    
    
    //app 部分：
    
    onLaunch () {
    	console.log('小程序 [page-index] 生命周期: onLaunch: 初始化') 
    },
    onShow () {
    	console.log('小程序 [page-index] 生命周期: onShow: 当小程序启动，或从后台进入前台显示') 
    },
    onHide () {
    	console.log('小程序 [page-index] 生命周期: onHide: 当小程序从前台进入后台') 
    },
    // 小程序页面自有生命周期 
    onLoad () {
    	console.log('小程序 [page-index] 生命周期: onLoad: 监听页面加载') 
    },
    onShow () {
    	console.log('小程序 [page-index] 生命周期: onShow: 监听页面显示') 
    },
    onReady () { 
    	console.log('小程序 [page-index] 生命周期: onReady: 监听页面初次渲染完成') },
    onHide () { 
    	console.log('小程序 [page-index] 生命周期: onHide: 监听页面隐藏')
    },
    onUnload () {
    	console.log('小程序 [page-index] 生命周期: onUnload: 监听页面卸载') 
    },
    onPullDownRefresh () {
    	console.log('小程序 [page-index] 生命周期: onPullDownRefresh: 监听用户下拉动作') 
    },
    onReachBottom () {
    	console.log('小程序 [page-index] 生命周期: onReachBottom: 页面上拉触底事件的处理函数') 
    },
    onShareAppMessage () {
    	console.log('小程序 [page-index] 生命周期: onShareAppMessage: 用户点击右上角分享')
    },
    onPageScroll () {
    	console.log('小程序 [page-index] 生命周期: onPageScroll: 页面滚动') 
    },
    onResize () { 
    	console.log('小程序 [page-index] 生命周期: onResize: 宽高改变') 
    },
    onTabItemTap (item) {
    	console.log('小程序 [page-index] 生命周期: onTabItemTap: 当前是 tab 页时，点击 tab 时触发 （mpvue 0.0.16 支持）') 
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70]: /images/20210812/117debe0f9b34765a22c12bcfce7f5f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 1]: /images/20210812/11464eca60264480a55b444755115cea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 2]: /images/20210812/6aa1b9970aea4f67aea00bd731b5e12e.png
[https_developers.weixin.qq.com_miniprogram_dev_framework_app-service_scene.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/scene.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 3]: /images/20210812/b8fe870c84d544f59f8b6dab7650c432.png
[https_developers.weixin.qq.com_miniprogram_dev_framework_app-service_route.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 4]: /images/20210812/db85b2e7620c4545af0ce75ac73d3acc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 5]: /images/20210812/08699626fef948078497aa2cd355fd8f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 6]: /images/20210812/2d06da1b6f194551bf0c28c5dc4c6969.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 7]: /images/20210812/fe066dc06dc5467186b934de3a596745.png