细节入微，系统透彻——Vant Weapp 深入解读之生命周期(进阶篇)

2023-09-29 01:06:37

一、初识进阶生命周期对象

在上一篇介绍中，我们对 Vant Weapp 生命周期基础知识进行了解读，包括 Page、页面内部组件和自定义 Tabbar 的生命周期。不过，除了这些基础对象，Vant Weapp 中还提供了更为进阶的生命周期对象，它们在一些复杂场景下发挥着至关重要的作用。

这些进阶生命周期对象主要包括：

App 对象
全局组件
自定义组件

二、深入理解 App 对象的生命周期

App 对象是 Vant Weapp 中最核心的生命周期对象，代表整个小程序的根组件。它拥有四个生命周期函数：

onLaunch()：小程序初始化时触发，仅触发一次。
onShow()：小程序启动、从后台进入前台时触发。
onHide()：小程序从前台进入后台时触发。
onError()：小程序发生错误时触发。

作为根组件，App 对象的生命周期函数通常用于处理小程序的全局初始化、状态管理和错误处理等任务。例如，可以在 onLaunch() 中初始化数据、设置监听器，在 onShow() 中显示页面、更新数据，在 onHide() 中保存数据、停止监听器，在 onError() 中处理错误并上报。

三、全面掌握全局组件的生命周期

全局组件是可以在多个页面中使用的组件，它拥有两个生命周期函数：

connectedCallback()：全局组件第一次被插入到文档树时触发。
disconnectedCallback()：全局组件从文档树中移除时触发。

全局组件的生命周期函数通常用于初始化数据、处理事件和销毁资源等任务。例如，可以在 connectedCallback() 中初始化数据、设置监听器，在 disconnectedCallback() 中销毁数据、停止监听器。

四、灵活运用自定义组件的生命周期

自定义组件是开发小程序时经常使用到的功能，它拥有四个生命周期函数：

created()：组件创建时触发，只触发一次。
attached()：组件第一次被插入到文档树时触发。
ready()：组件第一次渲染完成后触发。
detached()：组件从文档树中移除时触发。

自定义组件的生命周期函数通常用于初始化数据、处理事件和销毁资源等任务。例如，可以在 created() 中初始化数据、设置监听器，在 attached() 中更新数据、显示组件，在 ready() 中完成渲染、处理事件，在 detached() 中销毁数据、停止监听器。

五、进阶生命周期对象在 Tabbar 中的应用

Vant Weapp 提供的自定义 Tabbar 样例中使用了进阶生命周期对象，以便更好地管理 Tabbar 的状态和行为。例如，在 App 对象的 onLaunch() 函数中，初始化 Tabbar 数据并将其存储在全局变量中；在 Tabbar 组件的 created() 函数中，从全局变量中获取 Tabbar 数据并将其渲染到页面中；在 Tabbar 组件的 attached() 函数中，设置 Tabbar 的事件监听器；在 Tabbar 组件的 detached() 函数中，销毁 Tabbar 的事件监听器。