浅谈 VUE uni-app 生命周期

本文将详细介绍uni-app的生命周期，对单个页面和整个应用程序的生命周期进行描述并举例说明。

uni-app 页面生命周期

uni-app 页面生命周期是指当页面被创建、显示、更新和销毁时系统所执行的相关方法。下面是uni-app常见的页面生命周期：

created

当页面被创建时调用此方法。在其中可以进行数据初始化或者在页面加载完毕时请求服务端数据。使用示例：

created() {
  console.log("页面被创建");
  //此处可以进行数据初始化或请求服务端数据等操作
}

onReady

当页面准备显示时调用此方法。在此时页面还没有显示，但是即将显示在屏幕上。使用示例：

onReady() {
  console.log("页面准备显示");
  //此处可以进行dom操作等操作
}

onShow

当页面显示时调用此方法，可以在此时进行页面的数据刷新等操作。使用示例：

onShow() {
  console.log("页面显示");
  //此处可以进行页面数据刷新等操作
}

onHide

当页面被隐藏时调用此方法，使用示例：

onHide() {
  console.log("页面被隐藏");
  //此处可以进行一些清理工作等操作
}

onUnload

当页面被销毁时调用此方法，使用示例：

onUnload() {
  console.log("页面被销毁");
  //此处可以进行一些清理工作等操作
}

以上是uni-app页面常见的生命周期函数，能够让我们清晰地了解每个阶段需要执行的操作。

uni-app 应用程序生命周期

uni-app 应用程序生命周期是整个uni-app的生命周期，当应用程序启动和关闭时系统会调用相关的方法。下面是uni-app 应用程序常见的生命周期：

onLaunch

当应用程序启动时，调用此方法，可以在此时进行应用程序的初始化等操作。使用示例：

onLaunch() {
  console.log("应用程序启动了");
  //可以进行一些应用程序的初始化等操作
}

onHide

当应用程序进入后台时调用此方法。使用示例：

onHide() {
  console.log("应用程序进入后台了");
  //可以进行一些数据的缓存等操作
}

onShow

当应用程序从后台恢复到前台时调用此方法，可以在此时进行一些数据的更新等操作。使用示例：

onShow(options) {
  console.log("应用程序从后台恢复到前台了");
  //可以进行一些数据的更新等操作
}

onUniNViewMessage

当使用了 nvue + uni-app 时，可以通过调用此方法来处理从 nvue 传回来的消息。使用示例：

onUniNViewMessage(e) {
  console.log("收到了从nvue传来的消息：", e);
  //可以进行一些页面数据的更新等操作
}

onUnhandledRejection

当普通异步函数或 Promise 中抛出异常并未被处理时，会抛出 unhandledRejection 错误。使用示例：

onUnhandledRejection() {
  console.log("捕获了 unhandledRejection 错误");
  //可以进行一些错误记录等操作
}

以上是uni-app应用程序常见的生命周期函数，可以让我们更清楚地了解uni-app的整体应用程序运行过程。

示例说明

页面生命周期示例

<template>
  <div class="content">{{ message }}</div>
</template>

<script>
  export default {
    data() {
      return {
        message: "hello world"
      }
    },
    created() {
      console.log("页面被创建");
      //此处可以进行数据初始化或请求服务端数据等操作
    },
    onReady() {
      console.log("页面准备显示");
      //此处可以进行dom操作等操作
    },
    onShow() {
      console.log("页面显示");
      //此处可以进行页面数据刷新等操作
    },
    onHide() {
      console.log("页面被隐藏");
      //此处可以进行一些清理工作等操作
    },
    onUnload() {
      console.log("页面被销毁");
      //此处可以进行一些清理工作等操作
    }
  }
</script>

应用程序生命周期示例

App({
  onLaunch() {
    console.log("应用程序启动了");
    //可以进行一些应用程序的初始化等操作
  },
  onHide() {
    console.log("应用程序进入后台了");
    //可以进行一些数据的缓存等操作
  },
  onShow(options) {
    console.log("应用程序从后台恢复到前台了");
    //可以进行一些数据的更新等操作
  },
  onUniNViewMessage(e) {
    console.log("收到了从nvue传来的消息：", e);
    //可以进行一些页面数据的更新等操作
  },
  onUnhandledRejection() {
    console.log("捕获了 unhandledRejection 错误");
    //可以进行一些错误记录等操作
  }
})

以上是uni-app生命周期的详细讲解及示例说明。开发者可以根据需要，合理利用生命周期函数，实现更加丰富的应用程序。