uniapp生命周期

①页面生命周期函数
②组件生命周期函数
③应用生命周期函数

1、概述

在uni-app中，页面和组件都有一些生命周期函数 ,大致可以分为三类：页面生命周期函数\组件生命周期函数\应用生命周期函数

这些生命周期函数可以让我们能在特定的时机进行数据加载、页面渲染、状态管理等操作，更好地控制应用的行为、提升用户体验。

接下来我们就来总结一下uni-app中常用的页面和组件生命周期函数都有哪些：

小程序页面生命周期函数概述

标准生命周期函数===页面生命周期函数大致可以分为以下几种：

onLoad(options) : 页面加载时触发(只加载时触发一次)，可以利用参数 options 取页面跳转所带来的参数以及渲染初始化操作
onShow() : 页面显示时触发(每次页面显示都触发)，比如从后台进入前台显示，或者从子页面返回到当前页面时触发。
onReady() : 页面初次渲染完成时触发，可以在这里进行页面初始化操作。
onHide() : 页面隐藏时触发，比如页面跳转到子页面时触发。
onUnload() : 页面卸载时触发，如页面被关闭时。
onPullDownRefresh() : 监听用户下拉刷新事件，需要在 pages.json 的 enablePullDownRefresh 配置为 true 时才生效。
onReachBottom() : 监听页面触底事件，可以用来实现下拉加载更多数据。
onPageScroll(Object) : 页面滚动时触发，参数 Object 中包含页面滚动位置信息。
onResize(Object) : 页面尺寸改变时触发，参数 Object 中包含页面新的尺寸信息。

onInit()

此外有些小程序里还存在一些非标准的页面的生命周期函数

以百度知道小程序为例，使用 Page.onInit 进行优化,性能优化的时候可以把网络接口先放到这个里面。

页面初始化时触发。一个页面只会调用一次，可以在 onInit 的参数中获取打开当前页面路径中的参数。 onInit 执行时机早于 onLoad 。

如果开发者有性能优化的需求，建议将页面的数据网络请求放在 Page.onInit 中，并在网络请求的回调中执行 setData ，可以提升页面的加载速度。

onInit()

2、页面生命周期函数

页面生命周期函数大致可以分为以下几种：

onLoad(options) : 页面加载时触发(只加载时触发一次)，可以利用参数 options 取页面跳转所带来的参数以及渲染初始化操作
onShow() : 页面显示时触发(每次页面显示都触发)，比如从后台进入前台显示，或者从子页面返回到当前页面时触发。
onReady() : 页面初次渲染完成时触发，可以在这里进行页面初始化操作。
onHide() : 页面隐藏时触发，比如页面跳转到子页面时触发。
onUnload() : 页面卸载时触发，如页面被关闭时。
onPullDownRefresh() : 监听用户下拉刷新事件，需要在 pages.json 的 enablePullDownRefresh 配置为 true 时才生效。
onReachBottom() : 监听页面触底事件，可以用来实现下拉加载更多数据。
onPageScroll(Object) : 页面滚动时触发，参数 Object 中包含页面滚动位置信息。
onResize(Object) : 页面尺寸改变时触发，参数 Object 中包含页面新的尺寸信息。

（1）onLoad

函数在页面或组件加载时触发，可以用来进行一些初始化操作和数据加载。并且，在页面的 onLoad 函数中，可以获取到页面跳转时传递过来的参数 options，并进行数据加载或者其他初始化操作。

你可以理解为只是加载时候触发一次

这里举个简单例子

javascript

// 在A页面之中跳转B页面
uni.navigateTo({
    url: '//pages/user?userId=' + 1+'&name='+'张三'
});
 
// 在B页面之中接受A页面传递的参数并且调用某个函数
onLoad(option) {
    this.userId = option.userId;
    this.name = option.name;
    this.functionA(); // 调用某个函数
},

还可以在页面加载的时候单独对页面设置标题

javascript

onLoad() {
  // 设置页面标题
  uni.setNavigationBarTitle({
    title: '页面标题'
  });
  // 初始化页面状态
  this.initializeState();
},

有时候我们某个页面需要用户登录或者授权以后才能访问在进入某些页面前需要进行用户权限验证，可以在 onLoad 中进行相关验证和处理

javascript

onLoad() {
  // 验证用户是否登录
  if (!this.isAuthenticated()) {
    // 如果未登录，跳转到登录页面
    uni.navigateTo({
      url: '/pages/login/login'
    });
  }
},

在我们组件化的过程之中，标准化组件加载时要进行属性初始化和数据加载操作的时候，需要传递参数这个时候也要借用

下面我们就对于组件内部传递参数itemId 进行一些操作

javascript

<template>
  <view>
    <!-- 组件内容 -->
  </view>
</template>

<script>
export default {
  props: ['itemId'],
  onLoad() {
    // 组件加载时根据 itemId 加载对应数据
    this.fetchItem(this.itemId);
  },
  methods: {
    fetchItem(itemId) {
      // 根据 itemId 请求数据的逻辑
      console.log('加载组件数据，itemId:', itemId);
    }
  }
};
</script>

<style>
/* 样式表 */
</style>

（2）onShow()

在这个函数之中我们可以处理页面每次显示时需要执行的逻辑，比如说处理数据更新、动画、监听全局事件、渲染数据

javascript


onShow() { 
    // 页面显示时执行的逻辑 
       console.log('页面显示');
      // 可以在这里进行数据刷新等操作 
      this.refreshData(); 
},
 refreshData() { 
     // 刷新页面数据的逻辑 
      console.log('刷新数据'); 
 }

应用场景：每次页面显示的时候加载并且更新轮播图

javascript

 onShow() {
        // 每次页面显示时更新轮播图
        this.updateAds();
},
methods: {
    updateAds() {
        // 更新轮播图的逻辑
        console.log('轮播图!!!!');
    }
}

应用场景：有时候在页面之中我们可能需要监听全局事件或者页面间通信事件，onShow 中可以添加事件监听器。

javascript

  // 事件监听：
    onShow() {
        // 监听全局事件
        uni.$on('globalEvent', this.handleGlobalEvent);
    },
    methods: {
        handleGlobalEvent(data) {
            // 处理全局事件的逻辑
            console.log('处理全局事件', data);
        }
    }

（3）onReady

onReady 表示组件已经准备好，可以进行视图层操作或者执行其他初始化逻辑。在这里我们就可以对于元素之类的进行操作，比如获取页面元素、启动动画效果等我们都可以在这里进行。

javascript

 onReady() {
    // 组件已经准备好，可以进行操作
    console.log('组件已准备好');

    // 可以在这里执行组件初始化时需要的操作

},

举例：操作元素

javascript

<input ref="elementRef"></input>

onReady() {
  // 获取页面元素并操作
  const element = this.$refs.elementRef;
  console.log('页面元素：', element);
}

举例：页面加载完成，需要启动动画

javascript

onReady() {
    // 页面准备好后开启定时器
    this.startTimer();
},
methods: {
    startTimer() {
        // 定时器逻辑
        console.log('开启定时器');
        setInterval(() => {
            console.log('定时器触发');
        }, 1000);
    }
}

（4）onHide()

可以用于处理应用切换到后台或者页面隐藏时的逻辑，这个时候可以执行一些清理操作或者停止一些不必要的资源消耗。比如资源释放、数据保存、停止动画或定时器等。

举例：用户输入文本并且页面即将隐藏时，通过 onHide 方法将输入的文本保存到本地存储，比如我们常见的历史搜索记录就可以

javascript

 <template>
    <view>
        <input v-model="inputText" type="text" placeholder="输入文本">
    </view>
</template>
<script>
export default {
    data() {
        return {
            inputText: ''
        };
    },
    methods: {
        onHide() {
            // 在页面隐藏时保存输入的文本
            uni.setStorageSync('savedText', this.inputText);
        }
    },
    onHide() {
        // 在页面隐藏时保存输入的文本
        uni.setStorageSync('savedText', this.inputText);
    }
}
</script>

（5）onUnload()

用于处理页面销毁时的逻辑。页面销毁可以由用户手动触发（如页面切换）或系统自动触发（如内存不足时回收页面）,简单说，就是关闭页面的时候进行的操作！

用于在 onUnload 中清理页面使用的数据，避免数据冗余或泄露、取消订阅事件、关闭定时器、清空缓存等。

举个例子：页面销毁前我们取消订阅、清空数据

javascript

onUnload() {
 // 取消订阅事件
 this.unsubscribe();

 // 清空缓存或重置数据
 this.data = {};
}

举个例子：比如有个音频组件这个时候需要我们清空

在 onUnload 中可以释放这些资源，优化应用的性能和资源利用率。

javascript

onUnload() {
  // 释放资源，如关闭音频播放器、清理画布等
  this.audioContext.destroy();
}

举个例子：持久化数据比如说主题保存当前页面的状态或数据，下次页面加载时依然可以保持这种状态。

javascript

onUnload() {
  // 保存页面状态到本地存储
  uni.setStorageSync('lastVisitedPage', 'PageA');
}

举个例子：面销毁时优化应用的性能，及时释放不再需要的资源和内存，提升应用响应速度。比如我们需要在销毁时保存用户的浏览历史记录：

javascript

<template>
  <view>
    页面内容
  </view>
</template>
<script>
export default {
  onUnload() {
    // 在页面销毁时保存浏览历史
    this.saveHistory();
  },
  methods: {
    saveHistory() {
      // 将当前页面加入浏览历史记录
      const history = uni.getStorageSync('history') || [];
      history.push('/pages/PageA');
      uni.setStorageSync('history', history);
    }
  }
}
</script>

到这里我们常用的页面生命周期函数就已经总结完了!

上面我们主要描述的是常用的页面生命周期函数，接下来我们就应用一些非常用的页面生命周期函数

（6） onPullDownRefresh()

监听用户下拉刷新事件需要注意：

需要在 pages.json 的 enablePullDownRefresh 配置为 true 时才生效
数据加载完成后调用 uni.stopPullDownRefresh() 来通知框架下拉刷新已完成

javascript

onPullDownRefresh() { 
    // 下拉刷新时
    //重新加载数据、更新页面内容等 
    this.loadData(); 
    uni.stopPullDownRefresh()//数据加载完成后调用,通知下拉刷新已完成 
},

（7） onReachBottom()

监听页面触底事件，可以用来实现下拉加载更多数据，一般我们也可以用于用户滚动到页面底部时自动加载下一页的数据，实现无限滚动效果

配置json文件

javascript

{
   "enablePullDownRefresh": true
}

具体在页面之中及逆行应用

javascript

onReachBottom() { 
    // 当页面滚动到底部时执行的操作 
    // 例如，加载更多数据、实现无限滚动等 
     this.loadMoreData(); 
 },

（8） onPageScroll(Object)

监听页面滚动事件，页面滚动时触发，参数 Object 中包含页面滚动位置信息,可以帮助我们实现丰富的页面滚动交互效果

需要注意的东西：

在 onPageScroll 中的逻辑应尽量简洁，避免频繁操作影响页面性能。
小程序和 H5 可能对滚动事件的处理不同，存在兼容性
具体场景滚动事件的响应需要调整才能提升用户体验

举个例子：比如我们常见的用户下拉页面向下滚动一定距离后,显示返回顶部d的按钮

javascript

<template>
  <view>
    <!-- 页面内容 -->
  </view>
</template>

<script>
export default {
  onPageScroll(e) {
    // e 是包含滚动信息的事件对象
    console.log('页面滚动了，scrollTop:', e.scrollTop);
    
    // 可以根据滚动位置执行相应的操作
    if (e.scrollTop > 100) {
      // 当页面滚动超过100像素时执行某些操作
      this.showToTopButton = true; // 显示返回顶部按钮
    } else {
      this.showToTopButton = false; // 隐藏返回顶部按钮
    }
  },
  data() {
    return {
      showToTopButton: false // 控制返回顶部按钮的显示状态
    };
  }
};
</script>

举个例子：比如动态标题栏效果，可以滚动页面位置动态改变页面渐变背景色标题栏

javascript

onPageScroll(e) {
  if (e.scrollTop > 0) {
    this.isFixedTitle = true; // 固定标题栏
  } else {
    this.isFixedTitle = false; // 恢复默认标题栏
  }
}

举个例子：比如懒加载图片，当页面滚动到特定位置时，动态加载图片或内容，优化页面加载性能

javascript

onPageScroll(e) {
  if (e.scrollTop > 500 && !this.hasLoadedMoreContent) {
    this.loadMoreContent(); // 懒加载更多内容
  }
}

举个例子：比如实现导航栏吸顶效果:页面滚动到一定位置时，将导航栏固定在页面顶部

javascript

onPageScroll(e) {
  if (e.scrollTop > this.navbarTopOffset) {
    this.isFixedNavbar = true; // 固定导航栏
  } else {
    this.isFixedNavbar = false; // 恢复默认导航栏
  }
}

（9） onResize(Object)

onResize 用于监听页面尺寸变化。当页面尺寸发生变化时（如横屏切换、窗口大小改变等），也就是页面尺寸改变时自动触发该函数，并传递一个参数 Object 包含页面新的尺寸信息。

可以用于移动端和非移动端兼容判断、数据图表的自适应、动态适配字体大小、 响应式导航

需要注意：

逻辑应尽量简洁，避免频繁操作影响页面性能。
不同平台（如小程序和 H5）对窗口大小变化的事件处理不同，存在兼容性问题。
尺寸变化事件会频繁触发

举个例子：比如判断为移动端还是非移动端型号

javascript

<template>
  <view>
     内容  
  </view>
</template>

<script>
export default {
  onResize(size) {
    // size 是包含尺寸信息的事件对象
    console.log('页面尺寸发生变化，新的尺寸信息:', size);

    // 可以根据尺寸变化执行相应的操作
    if (size.windowWidth < 768) {
      this.isMobileView = true; // 判断为移动端视图
    } else {
      this.isMobileView = false; // 判断为非移动端视图
    }
  },
  data() {
    return {
      isMobileView: false // 控制移动端视图的显示状态
    };
  }
};
</script>

举个例子：有时候我们需要根据窗口大小的变化调整页面布局，实现移动端和桌面端不同的展示效果

javascript

onResize(size) {
  if (size.windowWidth < 768) {
    this.isMobileView = true; // 判断为移动端视图
  } else {
    this.isMobileView = false; // 判断为非移动端视图
  }
}

举个例子：根据窗口大小动态适配字体大小

javascript

onResize(size) {
  if (size.windowWidth < 768) {
    this.fontSize = '14px'; // 调整为移动端字体大小
  } else {
    this.fontSize = '16px'; // 恢复为桌面端字体大小
  }
}


**实时监测视口尺寸**
onResize(size) {
  if (size.windowWidth < 768) {
    this.loadMobileChart(); // 加载移动端适配的图表数据
  } else {
    this.loadDesktopChart(); // 加载桌面端适配的图表数据
  }
}

举个例子： 响应式导航,在小屏幕上使用折叠式菜单，大屏幕上显示完整导航。

javascript

onResize(size) {
  if (size.windowWidth < 768) {
    this.showMobileMenu = true; // 显示移动端折叠菜单
  } else {
    this.showMobileMenu = false; // 隐藏移动端折叠菜单
  }
}

到这里小程序的页面生命周期就结束了！

3、组件生命周期函数

组件生命周期函数大致可以分为以下几种：

onLoad(options) : 组件实例化时触发，参数 options 中包含组件属性。
onReady() : 组件初次渲染完成时触发。
onUnload() : 组件实例被移除时触发。
onShow() : 组件显示时触发。
onHide() : 组件隐藏时触发。

组件的生命周期我们已经在上面页面生命周期之中介绍过了，大体上都是类似差不多的！

4、应用生命周期函数

uni-app 提供了应用级别的生命周期函数，这些函数可以在 App.vue 中定义,生命周期函数函数大致可以分为以下几种：

onLaunch(options) : 应用初始化时触发，全局只触发一次。
onShow(options) : 应用启动或从后台进入前台显示时触发。
onHide() : 应用从前台进入后台时触发。
onError(error) : 应用发生错误时触发，参数 error 包含错误信息。
onUniNViewMessage(message) : 当使用 uni-app 的 nvue 实现多端统一视图时，接收到 nvue 发送的消息时触发。

接下来我们就分别针对这些生命周期做一个详细的解说和使用！

uniapp生命周期 ​

1、概述 ​

小程序页面生命周期函数概述 ​

onInit() ​

2、页面生命周期函数 ​

（1）onLoad ​

（2）onShow() ​

（3）onReady ​

（4）onHide() ​

（5）onUnload() ​

（6） onPullDownRefresh() ​

（7） onReachBottom() ​

（8） onPageScroll(Object) ​

（9） onResize(Object) ​

3、组件生命周期函数 ​

4、应用生命周期函数 ​

uniapp生命周期

1、概述

小程序页面生命周期函数概述

onInit()

2、页面生命周期函数

（1）onLoad

（2）onShow()

（3）onReady

（4）onHide()

（5）onUnload()

（6） onPullDownRefresh()

（7） onReachBottom()

（8） onPageScroll(Object)

（9） onResize(Object)

3、组件生命周期函数

4、应用生命周期函数