当前位置：网站首页>uni-app 从零开始-生命周期（二）

uni-app 从零开始-生命周期（二）

2022-08-04 14:31:00 【吟秋知忆】

应用生命周期

uni-app 支持如下应用生命周期函数(完整生命周期)：

函数名	说明
onLaunch	当 uni-app 初始化完成时触发（全局只触发一次）
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	uni-app 从前台进入后台
onError	当 uni-app 报错时触发
onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯(opens new window)
onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数（2.8.1+）
onPageNotFound	页面不存在监听函数
onThemeChange	监听系统主题变化

「注意：」

应用生命周期仅可在 App.vue 中监听，在其它页面监听无效。
应用启动参数，可以在 API uni.getLaunchOptionsSync 获取，详见。
onlaunch 里进行页面跳转，如遇白屏报错，请参考 https://ask.dcloud.net.cn/article/35942。
App.vue 不能写模板。
onPageNotFound 页面实际上已经打开了（比如通过分享卡片、小程序码）且发现页面不存在，才会触发，api 跳转不存在的页面不会触发（如 uni.navigateTo）。

App.vue

<script setup lang="ts">
// 只能在App.vue里监听应用的生命周期
import { onLaunch, onShow, onHide } from '@dcloudio/uni-app';
onLaunch(() => {
  console.log('App Launch');
});
onShow(() => {
  console.log('App Show');
});
onHide(() => {
  console.log('App Hide');
});
</script>

页面

// 从 A 页面跳转 B 页面时传递参数 ?id=1&name=uniapp，xxx 为跳转的页面路径
//uni.navigateTo({
//  url: 'xxx?id=1&name=uniapp'
//})

// 方法一：在 B 页面 <script setup> 中
<script setup>
  import {
    onLoad,
    onShow
  } from "@dcloudio/uni-app";

  // onLoad 接受 A 页面传递的参数
  onLoad((option) => {
    console.log("B 页面 onLoad:", option); //B 页面 onLoad: {id: '1', name: 'uniapp'}
  });

  onShow(() => {
    console.log("B 页面 onShow");
  });
</script>

组件钩子函数

Vue 组件钩子函数:

生命周期钩子	描述
beforeCreate	在实例初始化之后被调用（全局只触发一次）
created	在实例创建完成后被立即调用
beforeMount	在挂载开始之前被调用
mounted	挂载到实例上去之后调用，注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTick
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
activated	被 keep-alive 缓存的组件激活时调用（小程序不支持）
deactivated	被 keep-alive 缓存的组件停用时调用（小程序不支持）
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用
destroyed	实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
errorCaptured	当捕获一个来自子孙组件的错误时被调用

生命周期执行顺序

App.vue

<script setup lang="ts">
import { onLaunch, onShow, onHide, onError } from '@dcloudio/uni-app';
onLaunch(() => {
  console.log('App Launch');
});
onShow(() => {
  console.log('App Show');
});
onHide(() => {
  console.log('App Hide');
});

onError((err) => {
  console.log('app.onError:', err);
});
</script>

pages/index.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { format } from '@/utils';
import { useCounterStore } from '@/stores/modules/counter';
import { onLoad, onShow, onReady } from '@dcloudio/uni-app';

const counter = useCounterStore();

const title = ref('Hello');

console.log('page created ');

onMounted(() => {
  console.log('page onMounted');
});

onLoad(() => {
  console.log('page onLoad');
});

onShow(() => {
  console.log('page onShow');
});

onReady(() => {
  console.log('page onReady');
});

format();
</script>

小结：应用生命周期 onLaunch----> 应用生命周期 onShow----> 各个组件的组件生命周期 beforeCreate----> 各个组件的组件生命周期 created----> 页面生命周期 onLoad----> 页面生命周期 onShow----> 所有组件的组件生命周期 mounted----> 页面生命周期 onReady