uniappVue3版本中组件生命周期和页面生命周期的详细介绍

一、什么是生命周期?

生命周期有多重叫法,有叫生命周期函数的,也有叫生命周期钩子的,还有钩子函数的,其实都是代表,在 Vue 实例创建、更新和销毁的不同阶段触发的一组钩子函数,这些生命周期函数允许开发者在不同阶段对 Vue 实例进行操作,以便执行特定的逻辑或清理工作。

生命周期主要包含以下四个阶段:创建、挂载、更新、销毁。
好比一款手机,创建(拿到全新一款手机)、挂载(安装各种软件)、更新(系统或者软件升级)、销毁(丢弃手机)

二、Vue3中的生命周期函数

官方生命周期函数地址

  • setup()是在beforeCreate和created之前运行的,所以可以用setup代替这两个钩子函数。
  • onBeforeMount() : 已经完成了模板的编译,但是组件还未挂载到DOM上的函数。
  • onMounted() : 组件挂载到DOM完成后执行的函数。
  • onBeforeUpdate(): 组件更新之前执行的函数。
  • onUpdated(): 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该函数。
  • onBeforeUnmount(): 在组件实例被卸载之前调用。
  • onUnmounted(): 组件卸载完成后执行的函数
  • onActivated(): 若组件实例是 缓存树的一部分,当组件被插入到 DOM 中时调用。
  • onDeactivated(): 若组件实例是 缓存树的一部分,当组件从 DOM 中被移除时调用。
  • onErrorCaptured(): 在捕获了后代组件传递的错误时调用。

注意:在uniapp组件中,onBeforeUpdate、onUpdated、onActivated、onDeactivated,H5支持,小程序无法使用。

在这里插入图片描述

三、Vue2与Vue3的对比

在这里插入图片描述

四、uniapp中的页面生命周期函数

uniapp页面生命周期函数与 Vue.js 的生命周期函数有所不同,因为 uni-app 是基于 Vue.js 的跨平台应用框架,因此它具有自己特定的生命周期函数。
可以在这些生命周期函数中编写相应的逻辑代码,以便在不同阶段对页面进行初始化、展示、隐藏和卸载时执行特定的操作。

在开发uniapp Vue3版本的时候,不能像vue2的选项式API一样,可以直接使用onLoad、onShow等,在组合式API中需要先从“@dcloudio/uni-app”模块中导入才可以。

<script setup>
import {
   onLoad,onReady} from "@dcloudio/uni-app"
</script>
  • onLoad:页面加载时触发,可以在此生命周期函数中进行页面初始化操作。
  • onShow:页面显示时触发,可以在此生命周期函数中进行页面展示相关的操作。
  • onReady:页面初次渲染完成时触发,可以在此生命周期函数中进行页面渲染完成后的操作。
  • onHide:页面隐藏时触发,可以在此生命周期函数中进行页面隐藏相关的操作。
  • onUnload:页面卸载时触发,可以在此生命周期函数中进行页面卸载相关的操作。

其他常用的生命周期,可以看官方发文档,页面生命周期函数

五、uniapp中组件生命周期函数和页面生命周期函数的执行顺序

不包含组件的页面

onLoad > onShow > onReady

包含组件的页面

onLoad > onShow > onBeforeMount > onReady > onMounted

相关推荐

  1. react组件生命周期

    2024-01-07 04:38:02       8 阅读
  2. uniapp生命应用生命周期页面生命周期

    2024-01-07 04:38:02       25 阅读
  3. Vue3生命周期

    2024-01-07 04:38:02       22 阅读
  4. uni-app生命周期(应用,页面生命周期

    2024-01-07 04:38:02       10 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-01-07 04:38:02       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-07 04:38:02       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-07 04:38:02       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-07 04:38:02       18 阅读

热门阅读

  1. Vue响应式中的渲染 watcher

    2024-01-07 04:38:02       28 阅读
  2. c++day5

    c++day5

    2024-01-07 04:38:02      36 阅读
  3. web基础

    2024-01-07 04:38:02       33 阅读
  4. 【C语言】6-4 月份转换

    2024-01-07 04:38:02       37 阅读
  5. 面试 Vue 框架八股文十问十答第四期

    2024-01-07 04:38:02       43 阅读
  6. kubectl命令中常用的缩写

    2024-01-07 04:38:02       31 阅读