生命周期总结（uni-app、vue2、vue3生命周期讲解）

一、vue2生命周期

Vue2 的生命周期钩子函数分为 4 个阶段：创建、挂载、更新、销毁。

1. 创建阶段

• beforeCreate：实例初始化之后，数据观测和事件配置之前。

• created：实例创建完成，数据观测和事件配置已完成，但 DOM 未生成。

2. 挂载阶段

• beforeMount：模板编译完成，但未挂载到 DOM。

• mounted：实例挂载到 DOM 后调用，DOM 已生成。

3. 更新阶段

• beforeUpdate：数据更新时调用，DOM 未重新渲染。

• updated：数据更新后，DOM 重新渲染完成。

4. 销毁阶段

• beforeDestroy：实例销毁之前调用，此时实例仍可用。

• destroyed：实例销毁后调用，所有事件监听器和子实例被移除。

export default {
  beforeMount() {
    console.log('beforeMount: 模板编译完成，DOM 未挂载');
  },
  mounted() {
    console.log('mounted: DOM 已挂载');
  }
}

二、vue3生命周期

Vue3 的生命周期与 Vue2 类似，但有一些变化：

• Vue3 使用 Composition API，生命周期钩子函数可以通过 setup 函数访问。

• 部分钩子函数名称变化，并新增了一些钩子。

1. 创建阶段

• setup：替代 beforeCreate 和 created，在组件初始化时调用。

• onBeforeMount：替代 beforeMount。

• onMounted：替代 mounted。

2. 更新阶段

• onBeforeUpdate：替代 beforeUpdate。

• onUpdated：替代 updated。

3. 销毁阶段

• onBeforeUnmount：替代 beforeDestroy。

• onUnmounted：替代 destroyed。

4. 新增钩子

• onActivated：被 <keep-alive> 缓存的组件激活时调用。

• onDeactivated：被 <keep-alive> 缓存的组件停用时调用。

• onErrorCaptured：捕获子孙组件的错误时调用。

import { onBeforeMount, onMounted } from 'vue';

export default {
  setup() {
    console.log('setup: 组件初始化');

    onBeforeMount(() => {
      console.log('onBeforeMount: DOM 未挂载');
    });

    onMounted(() => {
      console.log('onMounted: DOM 已挂载');
    });
  }
}

三、vue2和vue3生命周期的区别

四、uni-app生命周期

UniApp 的生命周期分为 应用生命周期、页面生命周期 和 组件生命周期。

官网链接：页面 | uni-app官网

1、应用的生命周期（重点是前面几个）

• onLaunch：应用初始化完成时触发（全局只触发一次）。

• onShow：应用启动或从后台进入前台时触发。

• onHide：应用从前台进入后台时触发。

• onError：应用发生脚本错误时触发。

• onUniNViewMessage：监听 nvue 页面发送的消息。

• onUnhandledRejection：监听未处理的 Promise 拒绝事件。

• onPageNotFound：页面不存在时触发。

• onThemeChange：监听系统主题变化。

// 在 App.vue 中定义应用生命周期钩子
export default {
  onLaunch(options) {
    console.log('App Launch', options);
  },
  onShow(options) {
    console.log('App Show', options);
  },
  onHide() {
    console.log('App Hide');
  },
  onError(err) {
    console.error('App Error', err);
  }
}

2、页面的生命周期（前五个是重点）

页面生命周期是指单个页面的加载、显示、隐藏和卸载的过程。Uniapp 提供了以下页面生命周期钩子函数：

• onLoad: 页面加载时触发，一个页面只会调用一次，参数为页面传递的参数。适合在页面加载时获取参数并初始化数据。

• onShow: 页面显示/切入前台时触发。刷新也会触发。

• onReady: 页面初次渲染完成时触发，一个页面只会调用一次。

• onHide: 页面隐藏/切入后台时触发。

• onUnload: 页面卸载时触发。

• onPullDownRefresh: 页面下拉刷新时触发。

• onReachBottom: 页面上拉触底时触发。

• onPageScroll: 页面滚动时触发。

• onResize: 页面尺寸改变时触发（如屏幕旋转）。

• onTabItemTap: 点击 tab 时触发，参数为当前 tab 的信息。

// 在页面中定义页面生命周期钩子
export default {
  onLoad(options) {
    console.log('Page Load', options);
  },
  onShow() {
    console.log('Page Show');
  },
  onReady() {
    console.log('Page Ready');
  },
  onHide() {
    console.log('Page Hide');
  },
  onUnload() {
    console.log('Page Unload');
  }
}

注意：onLoad和onReady的区别

onload：

• 触发时机较晚，需要等待页面及其所有元素（包括图片、视频等）完全加载完毕后才会触发。
• 适用于需要在页面所有资源都加载完毕后才执行的操作，如计算页面元素的大小、位置等属性。
• 在传统的网页开发中，onload事件经常被用来确保页面资源已经加载完毕后再执行某些操作。
• 使用场景：如果你需要确保页面上的所有元素都已经加载完毕再发起请求，比如获取某些依赖于页面内容的动态数据，那么onload是一个合适的选择。这样可以避免因为页面元素还未加载完毕而导致的请求错误或数据不准确。

onready：

• 触发时机较早，当页面DOM结构绘制完毕后就会触发。
• 适用于需要在页面DOM结构就绪后立即执行的操作，如初始化UI组件、绑定事件监听器等。
• 在一些现代前端框架（如Vue、React等）中，通常会有类似的生命周期钩子（如mounted）来替代传统的onready事件。
• 使用场景：如果你需要在页面DOM结构就绪后立即发起请求，而不必等待所有资源都加载完毕，那么onready更为合适。这通常用于初始化页面上的某些功能或组件，这些功能或组件可能不依赖于页面上的所有资源。

3、组件的生命周期

UniApp 的组件生命周期与 Vue2 或 Vue3 的生命周期一致，如果使用的是vue2则使用vue2的生命周期，使用的vue3，则使用vue3生命周期。

• Vue2：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。

• Vue3：setup、onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted。

4、为什么应用和页面生命周期都包含 onShow 和 onHide

• 应用生命周期 的 onShow 和 onHide 是针对整个应用的，关注的是应用的整体状态（如启动、切换到前台/后台）。

• 页面生命周期 的 onShow 和 onHide 是针对单个页面的，关注的是页面的显示和隐藏状态（如页面跳转、返回）。

5、两者生命周期的区别

五、总结

• Vue2 和 Vue3 的生命周期基本一致，但 Vue3 引入了 Composition API，部分钩子函数名称变化，并新增了一些钩子。

• UniApp 的生命周期分为应用、页面和组件三部分，应用和页面的生命周期是 UniApp 特有的，组件的生命周期与 Vue 一致。

• 在实际开发中，根据框架版本（Vue2/Vue3）和平台（UniApp）选择合适的生命周期钩子函数。

• 发起请求的时机：

  • 页面加载时：onLoad

  • 页面显示时：onShow

  • 下拉刷新时：onPullDownRefresh

  • 上拉加载更多时：onReachBottom

  • 组件创建时：created 或 mounted