小程序vue3生命周期

### 微信小程序 Vue3 生命周期详解 #### 应用生命周期 在 `App.vue` 文件中，可以监听整个应用程序的生命周期事件。这些事件在整个应用层面上触发，并且只能在此文件内定义。 - **onLaunch**: 当小程序启动或从后台进入前台时首次加载触发此方法，在这里可以做一些初始化工作[^1]。 - **onShow**: 每次小程序从前台切至后台再返回前台都会触发该回调；也可以用于处理一些临时性的状态恢复逻辑[^2]。 - **onHide**: 小程序退入后台时调用，可用于保存未完成的任务或其他清理操作[^3]。 - **onError**: 发生错误（如API请求失败）时会被捕获并记录下来以便调试[^4]。 ```javascript // App.vue export default { onLaunch() { console.log('Application Launched'); }, onShow() { console.log('Application Shown'); }, onHide() { console.log('Application Hidden'); }, onError(msg) { console.error(`Error occurred: ${msg}`); } } ``` #### 页面生命周期 对于单个页面而言，则存在另一套独立于应用级别的生命周期管理机制： - **onLoad(options)**: 页面加载时执行，参数为上一页面传递的数据对象。适合做数据预取等工作[^5]。 - **onReady()**: 页面初次渲染完成后调用，此时可访问DOM节点进行进一步的操作[^6]。 - **onShow()**: 类似于应用层面的方法名，表示当页面显示出来之后立即被执行，可能因为用户重新回到当前页而多次触发[^7]。 - **onHide()**: 对应地，当页面即将消失前会先经过这个阶段，比如跳转到另一个新页面之前[^8]。 - **onUnload()**: 如果页面被关闭则会触发卸载过程中的最后一个钩子函数[^9]。 ```javascript // PageA.vue export default { onLoad(option) { console.log('Page Loaded with options:', option); }, onReady() { console.log('Page Ready to interact'); }, onShow() { console.log('Page is now visible'); }, onHide() { console.log('Page will be hidden soon'); }, onUnload() { console.log('Page Unloaded'); } }; ``` #### 组件生命周期 除了上述两种情况外，还有针对自定义组件设计的一系列特殊周期性行为： - **created()**: 创建期间最早可用的时间点之一，通常用来配置属性默认值或是绑定事件处理器[^10]。 - **mounted()**: 完成挂载后立刻调用，意味着已经能够安全地操纵真实的 DOM 结构了[^11]。 - **beforeDestroy()/unmounted()**: 销毁之前的最后机会来释放外部资源或者取消定时器等长期运行的任务[^12]。 ```javascript // MyComponent.vue import { defineComponent } from 'vue'; export default defineComponent({ created() { console.log('Component Created'); }, mounted() { console.log('Component Mounted'); }, beforeUnmount() { console.log('Component About To Be Destroyed'); }, }); ```