UniApp 应用、页面与组件的生命周期详解

在 UniApp 中使用 Vue3 组件时，组件的生命周期与 Vue3 的标准生命周期一致。由于 UniApp 是基于 Vue 的框架构建的，因此在使用 Vue3 语法开发组件时，其生命周期钩子函数的行为与 Vue3 完全一致。 ### Vue3 组件生命周期详解 #### 1. **创建阶段** - `beforeCreate`：在实例初始化之后被调用，此时数据观测 (data observer) 和事件配置尚未完成。 - `created`：在实例创建完成后被调用，此时数据已经绑定，但 DOM 还未挂载。 #### 2. **挂载阶段** - `beforeMount`：在挂载开始之前被调用，此时模板编译/渲染函数已经准备好。 - `mounted`：在实例挂载到 DOM 后调用，此时可以访问 DOM 元素。需要注意的是，如果组件依赖于子组件的挂载，应使用 `$nextTick` 确保子组件也已挂载完毕。 #### 3. **更新阶段** - `beforeUpdate`：在数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 - `updated`：在数据更改导致虚拟 DOM 重新渲染和打补丁之后调用。 #### 4. **销毁阶段** - `beforeUnmount`：在实例卸载之前调用，此时实例仍然完全可用。 - `unmounted`：在实例卸载之后调用，所有事件监听器和子实例都会被移除和销毁。 #### 5. **错误处理** - `errorCaptured`：当捕获一个来自后代组件的错误时调用。这个钩子可以用于记录错误或执行清理操作。 #### 6. **缓存组件（Vue3 新增）** - `activated`：当组件被 `<keep-alive>` 缓存并激活时调用。 - `deactivated`：当组件被 `<keep-alive>` 缓存并失活时调用。 在 UniApp 中，页面级别的生命周期如 `onLoad`, `onShow`, `onHide` 等并不适用于组件，这些是页面级别的生命周期钩子。对于组件而言，主要关注的是 Vue3 提供的标准生命周期钩子。 ### 示例代码 以下是一个简单的 Vue3 组件示例，展示了如何在 UniApp 中使用 Vue3 的生命周期钩子： ```vue <template> <view> <text>{{ message }}</text> </view> </template> <script setup> import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'; const message = ref('Hello Vue3'); onBeforeMount(() => { console.log('Component is about to be mounted'); }); onMounted(() => { console.log('Component has been mounted'); }); onBeforeUpdate(() => { console.log('Component is about to be updated'); }); onUpdated(() => { console.log('Component has been updated'); }); onBeforeUnmount(() => { console.log('Component is about to be unmounted'); }); onUnmounted(() => { console.log('Component has been unmounted'); }); </script> ``` 在这个示例中，使用了 Vue3 的 Composition API 来定义组件的生命周期钩子，并通过 `ref` 来管理响应式数据。 ### 总结 在 UniApp 中使用 Vue3 组件时，组件的生命周期遵循 Vue3 的标准生命周期。开发者可以根据需要选择合适的生命周期钩子来执行相应的逻辑操作。[^3]