uniapp 页面生命周期 钩子
时间: 2025-06-01 12:09:28 浏览: 11
### UniApp 页面生命周期钩子的使用方法
在 UniApp 中,页面生命周期钩子是开发中非常重要的部分,它们允许开发者在特定的时机执行代码逻辑。以下是关于 UniApp 页面生命周期钩子的详细说明和使用方法:
#### 1. 基础 Vue 生命周期钩子
UniApp 的页面生命周期与 Vue 的生命周期紧密相关。以下是一些基础的 Vue 生命周期钩子及其作用[^1]:
- **beforeCreate**:实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
- **created**:实例已经创建完成,此时可以访问 data 和 methods。
- **beforeMount**:在挂载开始之前被调用,相关的 render 函数首次被调用。
- **mounted**:实例挂载到 DOM 后被调用,此时可以操作 DOM。
```javascript
export default {
beforeCreate() {
console.log('beforeCreate');
},
created() {
console.log('created');
},
beforeMount() {
console.log('beforeMount');
},
mounted() {
console.log('mounted');
}
};
```
#### 2. 小程序扩展的生命周期钩子
除了基础的 Vue 生命周期钩子外,UniApp 还为小程序平台扩展了一些额外的生命周期钩子[^4]。这些钩子主要针对页面的加载、显示和卸载等场景。
- **onLoad**:页面加载时触发,参数为上个页面传递的数据,适用于页面数据初始化[^3]。
- **onShow**:页面显示/切入前台时触发,适用于处理页面显示效果或更新数据[^3]。
- **onReady**:页面初次渲染完成时触发,适用于页面动画和交互初始化。
- **onHide**:页面隐藏/切入后台时触发,适用于处理页面隐藏效果或缓存数据。
- **onUnload**:页面卸载时触发,适用于释放资源或销毁监听器[^3]。
```javascript
export default {
onLoad(options) {
console.log('onLoad', options);
},
onShow() {
console.log('onShow');
},
onReady() {
console.log('onReady');
},
onHide() {
console.log('onHide');
},
onUnload() {
console.log('onUnload');
}
};
```
#### 3. Vue 3 组合式 API 的生命周期管理
在 Vue 3 中,`setup` 函数可以在组件创建之前执行,替代了传统的 `beforeCreate` 和 `created` 钩子[^2]。通过组合式 API,可以更灵活地管理生命周期。
```javascript
<script setup>
import { onMounted, onUnmounted } from 'vue';
onMounted(() => {
console.log('Component mounted');
});
onUnmounted(() => {
console.log('Component unmounted');
});
</script>
```
#### 4. 生命周期钩子的应用场景
- **数据初始化**:在 `onLoad` 钩子中进行数据初始化,例如从服务器请求数据[^3]。
- **网络请求**:在 `onLoad` 或 `onShow` 钩子中发起网络请求,确保页面每次显示时都能获取最新数据。
- **DOM 操作**:在 `onReady` 钩子中进行 DOM 操作,因为此时页面已完全渲染。
- **资源释放**:在 `onUnload` 钩子中清理定时器或销毁事件监听器,避免内存泄漏。
```javascript
export default {
data() {
return {
timer: null
};
},
onLoad() {
this.timer = setInterval(() => {
console.log('Timer running');
}, 1000);
},
onUnload() {
clearInterval(this.timer);
}
};
```
#### 5. 注意事项
- 确保在正确的生命周期钩子中执行相应的操作,避免不必要的性能开销。
- 在 `onLoad` 和 `onShow` 钩子中处理页面数据更新时,注意区分首次加载和再次显示的逻辑。
- 使用 `onReady` 钩子时,确保依赖的 DOM 元素已渲染完成。
### 示例:结合生命周期钩子实现动态更新 TabBar 角标
以下是一个结合 `onLoad` 和 `onShow` 钩子动态更新 TabBar 角标的示例:
```javascript
export default {
onLoad() {
this.updateTabBarBadge();
},
onShow() {
this.updateTabBarBadge();
},
methods: {
updateTabBarBadge() {
uni.setTabBarBadge({
index: 0,
text: '99+'
});
}
}
};
```
阅读全文
相关推荐



















