若依(ruoyi)RuoYiApp版—生命周期

若依App版是基于uniapp的在 UniApp 中生命周期分为 应用生命周期、页面生命周期 和 组件生命周期。1.应用生命周期注意应用生命周期仅可在App.vue中监听在其它页面监听无效。我们修改一下app.vue中的代码加入下面的代码后点击“运行”中的“运行到浏览器”等待一会可以看到浏览器自动打开。浏览器打开后按一下F12可以看到生命周期函数的内容被正常执行了。2.页面生命周期uni-app支持如下声明周期我们在index.vue中新增代码测试一下页面的生命周期。代码如下templateviewclasscontentimageclasslogosrc/static/logo.png/imageviewclasstext-areatextclasstitleHello RuoYi/text/view/view/template!--新增--scriptexportdefault{onInit(){console.log(index页面onInit)},onLoad(){console.log(index页面onLoad)},onShow(){console.log(index页面onShow)},onReady(){console.log(index页面onReady)},onHide(){console.log(index页面onHide)},onUnload(){console.log(index页面onUnload)},}/scriptstyle scoped.content{display:flex;flex-direction:column;align-items:center;justify-content:center;}.logo{height:200rpx;width:200rpx;margin-top:200rpx;margin-left:auto;margin-right:auto;margin-bottom:50rpx;}.text-area{display:flex;justify-content:center;}.title{font-size:36rpx;color:#8f8f94;}/style运行效果如下3.组件生命周期uni-app组件支持的生命周期与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期我们继续修改index.vue代码加入组件生命周期,修改index.vue中的代码如下templateviewclasscontentimageclasslogosrc/static/logo.png/imageviewclasstext-areatextclasstitleHello RuoYi/text/view/view/template!-- 新增 --scriptexportdefault{onInit(){console.log(index页面onInit)},onLoad(){console.log(index页面onLoad)},onShow(){console.log(index页面onShow)},onReady(){console.log(index页面onReady)},onHide(){console.log(index页面onHide)},onUnload(){console.log(index页面onUnload)},//组件生命周期beforeCreate(){console.log(组件beforeCreate)},created(){console.log(组件created)},beforeMount(){console.log(组件beforeMount)},mounted(){console.log(组件mounted)},beforeUpdate(){console.log(组件beforeUpdate)},updated(){console.log(组件updated)},beforeDestroy(){console.log(组件beforeDestroy)},destroyed(){console.log(组件destroyed)}}/scriptstylescoped.content{display:flex;flex-direction:column;align-items:center;justify-content:center;}.logo{height:200rpx;width:200rpx;margin-top:200rpx;margin-left:auto;margin-right:auto;margin-bottom:50rpx;}.text-area{display:flex;justify-content:center;}.title{font-size:36rpx;color:#8f8f94;}/style重新保存后运行结果如下