吟秋知忆

V1

2022/08/04阅读:16主题:凝夜紫

uni-app 从零开始-生命周期(二)

应用生命周期

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 监听系统主题变化

注意:

  1. 应用生命周期仅可在 App.vue 中监听,在其它页面监听无效。
  2. 应用启动参数,可以在 API uni.getLaunchOptionsSync 获取,详见
  3. onlaunch 里进行页面跳转,如遇白屏报错,请参考https://ask.dcloud.net.cn/article/35942
  4. App.vue 不能写模板。
  5. 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

在哪个生命周期请求数据?

在 Vue 请求数据时,通常可以放在 created、beforeMount、mounted 中进行调用,此时 data 已经创建,可以将服务端端返回的数据进行赋值。(一般在created、mounted中请数据)对比如下:

created: 推荐在 created 钩子函数中调用异步请求,因为在 created 钩子函数中调用异步请求有以下优点:

  1. 能更快获取到服务端数据,减少页面 loading 时间。
  2. ssr 不支持 beforeMount 、mounted 钩子函数,所以放在 created 中有助于一致性。

注意:created通常用于从后端 API 获取数据并将其设置为数据属性,不能做任何 DOM 操作。

mounted:

  1. 在以下情况下使用:您需要在初始渲染之前或之后立即访问或修改组件的 DOM。
console.log(element.innerHTML)
  1. 不要在以下情况下使用:您需要在初始化时为组件获取一些数据。为此,请使用 created (或为 keep-alive 组件创建 + activate ),特别是如果您在服务器端渲染期间需要该数据。

onLoad: 需要根据路由传递的参数请求数据时使用。

推荐阅读

关注我

利用空闲时间免费兼职(长期有效),请联系我(PS:关注公众号后,点击“联系我”获取联系方式)~

分类:

前端

标签:

前端

作者介绍

吟秋知忆
V1