前端
面试题
前端
面试题

一 微信⼩程序的⽣命周期函数有哪些?

1.1 是什么

跟 vue、react 框架⼀样，微信⼩程序框架也存在⽣命周期，实质也是⼀堆会在特定时期执⾏的函数

⼩程序中，⽣命周期主要分成了三部分：

  • 应⽤的⽣命周期
  • ⻚⾯的⽣命周期
  • 组件的⽣命周期

1.1.1 应⽤的⽣命周期

⼩程序的⽣命周期函数是在 app.js ⾥⾯调⽤的，通过 App(Object) 函数⽤来注册⼀个⼩程序，指定其⼩程序的⽣命周期回调

1.1.2 ⻚⾯的⽣命周期

⻚⾯⽣命周期函数就是当你每进⼊/切换到⼀个新的⻚⾯的时候，就会调⽤的⽣命周期函数，同样通过App(Object) 函数⽤来注册⼀个⻚⾯

1.1.3 组件的⽣命周期

组件的⽣命周期，指的是组件⾃⾝的⼀些函数，这些函数在特殊的时间点或遇到⼀些特殊的框架事件时被⾃动触发，通过 Component(Object) 进⾏注册组件

1.2 有哪些

1.2.1 应⽤的⽣命周期

  • onLaunch:小程序初始化完成时触发,全局只触发一次
  • onShow:小程序启动,或从后台进入前台显示时触发
  • onHide:小程序从前台进入后台时触发
  • onError:小程序发生脚本错误或API调用报错时触发
  • onPageNotFound:小程序要打开的页面不存在时触发
  • onUnhandledRejection:小程序有未处理的Promise拒绝时触发
  • onThemeChange:系统切换主题时触发

1.2.2 ⻚⾯的⽣命周期

  • onLoad:生命周期回调-监听页面加载
  • onSHow:监听页面显示
  • onReady:监听页面初次渲染完成
  • onHide:监听页面隐藏
  • onUnload:监听页面卸载

1.2.3 组件的⽣命周期

  • created:监听页面加载
  • attached:监听页面显示
  • ready:页面初次渲染完成
  • moved:监听页面隐藏
  • detached:页面卸载
  • error:每当组件方法抛出错误时执行

注意的是：

  • 组件实例刚刚被创建好时， created ⽣命周期被触发，此时，组件数据 this.data 就是在Component 构造器中定义的数据 data ， 此时不能调⽤ setData
  • 在组件完全初始化完毕、进⼊⻚⾯节点树后， attached ⽣命周期被触发。此时， this.data 已被初始化为组件的当前值。这个⽣命周期很有⽤，绝⼤多数初始化⼯作可以在这个时机进⾏
  • 在组件离开⻚⾯节点树后， detached ⽣命周期被触发。退出⼀个⻚⾯时，如果组件还在⻚⾯节点树中，则 detached 会被触发

还有⼀些特殊的⽣命周期，它们并⾮与组件有很强的关联，但有时组件需要获知，以便组件内部处理，这样的⽣命周期称为“组件所在⻚⾯的⽣命周期”，在 pageLifetimes 定义段中定义，如下：

  • show:组件所在页面被展示时执行
  • hide:组件所在的页面被隐藏时执行

代码如下：

Component({
 pageLifetimes: {
 show: function() {
 // ⻚⾯被展⽰
 },
 hide: function() {
 // ⻚⾯被隐藏
 },
 }
})

1.3 执⾏过程

1.3.1 应⽤的⽣命周期执⾏过程：

  • ⽤⼾⾸次打开⼩程序，触发 onLaunch（全局只触发⼀次）
  • ⼩程序初始化完成后，触发onShow⽅法，监听⼩程序显⽰
  • ⼩程序从前台进⼊后台，触发 onHide⽅法
  • ⼩程序从后台进⼊前台显⽰，触发 onShow⽅法
  • ⼩程序后台运⾏⼀定时间，或系统资源占⽤过⾼，会被销毁

1.3.2 ⻚⾯⽣命周期的执⾏过程：

  • ⼩程序注册完成后，加载⻚⾯，触发onLoad⽅法
  • ⻚⾯载⼊后触发onShow⽅法，显⽰⻚⾯
  • ⾸次显⽰⻚⾯，会触发onReady⽅法，渲染⻚⾯元素和样式，⼀个⻚⾯只会调⽤⼀次
  • 当⼩程序后台运⾏或跳转到其他⻚⾯时，触发onHide⽅法
  • 当⼩程序有后台进⼊到前台运⾏或重新进⼊⻚⾯时，触发onShow⽅法
  • 当使⽤重定向⽅法 wx.redirectTo() 或关闭当前⻚返回上⼀⻚wx.navigateBack()，触发onUnload

当存在也应⽤⽣命周期和⻚⾯周期的时候，相关的执⾏顺序如下：

  • 打开⼩程序：(App)onLaunch --> (App)onShow --> (Pages)onLoad --> (Pages)onShow --> (pages)onRead
  • 进⼊下⼀个⻚⾯：(Pages)onHide --> (Next)onLoad --> (Next)onShow --> (Next)onReady
  • 返回上⼀个⻚⾯：(curr)onUnload --> (pre)onShow
  • 离开⼩程序：(App)onHide
  • 再次进⼊：⼩程序未销毁 --> (App)onShow(执⾏上⾯的顺序），⼩程序被销毁，（App)onLaunch重新开始执⾏