生命周期
应用的生命周期
生命周期的概念：一个对象从创建、运行、销毁的整个过程被成为生命周期。
生命周期函数：在生命周期中每个阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数
uni-app 支持如下应用生命周期函数：
| 函数名 | 说明 |
|---|---|
| onLaunch | 当 uni-app 初始化完成时触发（全局只触发一次） |
| onShow | 当 uni-app 启动，或从后台进入前台显示 |
| onHide | 当 uni-app 从前台进入后台 |
| onError | 当 uni-app 报错时触发 |
页面的生命周期
uni-app 支持如下页面生命周期函数：
| 函数名 | 说明 |
|---|---|
| onLoad | 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例 |
| onShow | 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面 |
| onReady | 监听页面初次渲染完成。 |
| onHide | 监听页面隐藏 |
| onUnload | 监听页面卸载 |
参数传递
onLoad 可以获取页面传递的参数,里面的参数就是传递的值
- 生命周期函数写的位置
js
export default {
data() {
return {
title: "Hello",
};
},
onLoad: function () {},
onShow: function () {},
onHide: function () {},
onError: function () {},
};vue3 版本
js
import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
onLoad(() => {
console.log(11);
});
// 可以使用接收过来的值
// onLoad((option) => {
// console.log(option.id);
// }组件的生命周期
- 页面里面要是使用组件,可以在根目录文件夹下面新建一个 component 文件夹,里面写组件
uniapp 组件支持的生命周期,与 vue 标准组件的生命周期相同。这里没有页面级的 onLoad 生命周期
| 函数名 | 说明 | 平台差异 | 最低版本 |
|---|---|---|---|
| beforeCreate | 在实例初始化之前调用 | 无 | 无 |
| created | 在实例创建完成后调用 | 无 | 无 |
| beforeMount | 在挂载之前调用 | 无 | 无 |
| mounted | 实例挂载完调用 | 无 | 无 |
| beforeUpdate | 数据更新的时候调用 | 无 | 无 |
| updated | 数据更新完毕调用 | 无 | 无 |
| beforeDestroy | 实例销毁前调用 | 无 | 无 |
| destroyed | 实例销毁 | 无 | 无 |
注意
应用的生命周期只能写在 App.vue 里面 而页面的生命周期只能写在每个页面里 而组件里面的生命周期只能在组件里面用