uni-app生命周期函数

发布于 1周前 作者 nodeper 来自 Uni-App

uni-app生命周期函数

请教一下，我有一个Login.vue的页面，在h5下，会执行【activited()】函数，但是app-plus下，会执行【onLoad()】函数，这是为什么呢？

Harmonyos Next教程
1 回复

在uni-app中，生命周期函数是指页面或组件从创建到销毁所经历的一系列过程。了解并正确使用这些生命周期函数，可以帮助开发者更好地控制应用的行为和性能。下面是一些常用的uni-app生命周期函数及其代码示例。

页面生命周期函数

  1. onLoad

    • 页面加载时触发，一个页面只会调用一次。
    • 常用于获取页面参数。
    onLoad(options) {
  console.log('页面加载', options);
}

  2. onShow

    • 页面显示到屏幕时触发，可以多次触发。
    • 常用于页面每次显示时的数据刷新。
    onShow() {
  console.log('页面显示');
}

  3. onHide

    • 页面隐藏到屏幕后面时触发，可以多次触发。
    • 常用于页面隐藏时的资源释放。
    onHide() {
  console.log('页面隐藏');
}

  4. onUnload

    • 页面卸载时触发，可以定义一些清理工作，如清除定时器。
    • 一个页面只会调用一次。
    onUnload() {
  console.log('页面卸载');
  clearInterval(this.timer);
}

组件生命周期函数

  1. created

    • 在组件实例创建完成后被立即调用。
    • 常用于初始化数据。
    created() {
  console.log('组件创建完成');
  this.initData();
}

  2. attached

    • 在组件被插入到DOM树后调用。
    • 常用于操作DOM。
    attached() {
  console.log('组件插入DOM');
  this.$nextTick(() => {
    this.domOperation();
  });
}

  3. moved

    • 在组件被移动到不同位置时调用。
    • 较少使用，通常用于复杂的组件嵌套场景。
    moved() {
  console.log('组件移动');
}

  4. detached

    • 在组件从DOM树移除时调用。
    • 常用于清理工作。
    detached() {
  console.log('组件移除DOM');
  this.cleanup();
}

以上是uni-app中常用的生命周期函数及其代码示例。在实际开发中，根据需求选择合适的生命周期函数，可以帮助开发者更好地控制应用的行为和性能。

回到顶部