uniapp的生命周期及其和vue生命周期的对比

uni-app应用生命周期

uni-app部分页面生命周期

vue生命周期(注:这也是Uniapp组件的生命周期)

uni-app页面生命周期与vue生命周期的对比

页面加载过程

加载 -> 显示 -> 加载完成 -> 页面隐藏 -> 页面卸载

uni-app页面加载过程

onLoad:监听页面加载 -> onShow:监听页面显示 -> onReady:监听页面初次渲染完成 -> onHide:监听页面隐藏 -> onUnload:监听页面卸载

vue页面加载过程

created:实例被创建后执行 -> beforeMount: 实例被挂载之前执行 -> mounted:实例挂载完成后执行 -> updated:页面更新后执行 -> beforeDestroy:页面销毁前执行

根据以上对比:建议:

1、uni-app的页面生命周期仅在page页面有效,而单独封装的组件中【页面周期无效】,但是Vue的生命周期依然有效 【Vue的生命周期在任何地方都是有效的,即你仍然可以在uni-app项目中使用Vue生命周期,但是不建议这么做】
2、推荐使用uni-app里面的onLoad 代替 vue 里面的 created
3、推荐使用uni-app里面的onReady 代替 vue 里面的 mounted
4、uniapp的子组件里是没有onLoad,onReady等页面生命周期,要使用created,mounted等Vue生命周期

uni-app生命周期

https://uniapp.dcloud.io/frame?id=生命周期

vue生命周期

https://cn.vuejs.org/v2/guide/instance.html#生命周期图示

posted @ 2020-04-09 10:50  huihuihero  阅读(9291)  评论(0编辑  收藏  举报