生命周期

组件、页面和应用都有生命周期。可以通过生命周期函数在对象的特定生命周期阶段调用指定的功能。

组件和页面的生命周期

在组件和页面对象中定义生命周期函数即可触发调用。例如：

<script>
export default {
  onInit() {
    console.log("onInit() called!")
  }
}
</script>

onInit() 生命周期函数会在组件实例化之后调用。生命周期函数都没有参数，也不使用返回值。

组件生命周期函数

这些生命周期函数是组件和页面共有的。

方法

此时组件已经实例化，且 view-model 中的数据已经准备好，可以通过 this 关键字访问其中的数据。通常在此生命周期函数中执行开发者自定义的初始化逻辑。

方法

此时组件已经渲染完成。此时的组件树具有对应的控件树（类似于 DOM 树）。

方法

组件准备销毁。此时仍可以访问 view-model 中的数据。通常在在 onDestroy() 中执行自定义的资源释放操作。

页面生命周期函数

这些生命周期函数只存在于页面中。

方法

页面即将显示时调用。使用 router.back() 返回时，底层的页面即将显示时会调用 onShow()；刚创建的新页面在第一次显示之前也会调用 onShow()。

方法

页面即将隐藏时调用。使用 router.push() 时导致底层页面隐藏时会调用 onHide()。但是页面销毁之前并不会隐藏页面，因此不会调用 onHide()。

应用生命周期

应用生命周期函数

方法

应用加载时调用此生命周期函数。

方法

应用将要销毁时调用此生命周期函数。

方法

应用从后台切换到前台显示时调用此生命周期函数。

方法

应用从前台隐藏到后台前调用此生命周期函数。

方法

通过 deeplink URI 启动应用时会调用 onRoute 生命周期函数。参数 page 和 query 是解码后的 URI 字段。例如：

// file: app.ux
export default {
  // 假设通过 app://example.app/page/to/deeplink?key=value&query=result
  onRoute(page, query) {
    console.log(page) // 打印字符串 '/page/to/deeplink'
    console.log(query) // 打印对象 {deeplink: 'key', query: 'result'}
  }
}

onRoute() 会在 onCreate() 之后，onShow() 之前调用。开发者可以在 onRoute() 中根据 deeplink 指定的参数进行初始化（例如跳转到特定的页面）。

异步生命周期函数

组件、页面或者应用的生命周期函数可以是异步的，即 async 函数或者返回 Promise 对象。例如

import fs from "@system.file"

export default {
  async onInit() {
    // 等待异步的文件读取完成再继续执行。
    let text = await fs.readText({ uri: "internal://files/test.txt" })
    console.log(text)
  }
}

假设这是某个组件的 onInit() 生命周期函数，那么它会在异步的文件读取完成后才会继续执行组件渲染。在异步生命周期函数执行期间存在以下限制：

• 不会重复执行组件渲染，在此期间任何对响应式属性的操作不会导致界面更新；
• 暂时屏蔽用户输入，触摸和按键都不会响应（否则用户如果反复点击会导致重复响应）。

异步生命周期函数的主要作用是等待异步的 IO 和资源操作，避免过早地显示未加载好的界面。特别是打开新页面时会等待页面的 onInit()、onReady() 和 onShow() 生命周期函数全部执行完才会开始显示页面或播放转场动画。

注意

目前异步生命周期函数是实验性的，它们可能引起包括崩溃在内的各种问题。在异步生命周期函数调用过程中关闭正在渲染的页面会导致崩溃。