Vue 中组件生命周期及uniapp页面生命周期的详细介绍

一、 Vue2中的生命周期函数

• beforeCreate() 在实例刚创建出来, 但还没完成实例初始化时同步调用
• created() : 在实例创建完成初始化后被同步调用
• beforeMount() : 组件实例挂载到DOM之前同步调用。
• mounted() : 组件实例挂载到DOM完成后同步调用。
• beforeUpdate(): 在数据发生改变后，DOM 被更新之前被调用
• updated(): 在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
• beforeDestroy(): 在组件实例被卸载之前调用。
• destroyed(): 在组件卸载完成后同步调用。
• activated(): 进入被 keep-alive 缓存的组件页面时(缓存的组件页面被激活时)调用。
• deactivated(): 离开被 keep-alive 缓存的组件时(缓存的组件页面处于失活时)调用。
• errorCaptured(): 在捕获一个来自后代组件的错误时被调用。

二、 Vue3中的生命周期函数

• setup() 组件实例刚被创建出来，但还没完成实例初始化时同步调用。
• onBeforeMount() : 在组件被挂载之前被调用。
• onMounted() : 组件挂载到DOM完成后执行。
• onBeforeUpdate(): 在组件即将因为响应式状态变更而更新其 DOM 树之前调用。
• onUpdated(): 在组件因为响应式状态变更而完成 DOM 树更新之后调用。
• onBeforeUnmount(): 在组件实例被卸载之前调用。
• onUnmounted(): 组件卸载完成后执行的函数
• onActivated(): 若组件实例是 缓存树的一部分，当组件被插入到 DOM 中时调用。
• onDeactivated(): 若组件实例是 缓存树的一部分，当组件从 DOM 中被移除时调用。
• onErrorCaptured(): 在捕获了后代组件传递的错误时调用。

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

三、 Vue2与Vue3的生命周期对比

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

• uni-app 是基于 Vue.js 的跨平台应用框架，封装了自己特定的页面生命周期函数。在开发uniapp Vue3版本时，想要使用onLoad、onShow等页面生命周期函数，需要从"@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