uniappx几个生命周期说明

对于页面首次加载

页面的生命周期顺序:onLoad -> onShow -> onReady。

Vue 的生命周期顺序:created -> --------- -> mounted 。

created 和 onLoad 接近,mounted 和 onReady接近。

一、页面的生命周期

  • onLoad

    **触发时间:**页面首次加载时触发,仅加载一次。

    **使用位置:**接收上级页面传递的参数 (options),进行页面数据的初始化(如发起网络请求)

  • onReady

    **触发时间:**页面首次渲染完成,DOM 已准备就绪时触发,仅一次。

    **使用位置:**执行需要操作 DOM 节点的逻辑时,如使用 uni.createSelectorQuery() 获取节点信息。

  • onShow

    **触发时间:**页面每次显示到前台时触发。

    **使用位置:**更新每次显示都可能变化的数据(如用户信息),适合刷新列表、启动定时器等。

  • onHide

    **触发时间:**页面被隐藏或切入后台时触发。

    **使用位置:**执行页面暂停时的操作,如清除定时器、暂停视频播放等。

  • onUnload

    **触发时间:**页面被完全卸载和销毁时触发。

    **使用位置:**进行资源清理,防止内存泄漏,如取消未完成的网络请求、解绑全局事件监听器等。

二、Vue 组件生命周期

  • created

    **触发时间:**组件实例创建完成,但 DOM 未准备就绪(页面渲染完成前)。

    **使用位置:**在 onLoad ​之后,onReady ​之前触发。可用于非 DOM 相关的数据初始化。

  • mounted

    **触发时间:**组件首次被挂载到 DOM 后触发,也就是DOM准备就绪。

    **使用位置:**在 onReady ​之后或几乎同时触发。表示组件可交互,可用于 DOM 操作,但 UniApp 中更推荐在 onReady 内执行。

  • beforeUpdate

    **触发时间:**数据变化后,DOM 重新渲染之前​。

    **使用位置:**在页面显示后,数据更新时触发。用于在更新前访问现有 DOM。

  • updated

    **触发时间:**数据变化,DOM 重新渲染之后​。

    **使用位置:**用于数据更改后操作 DOM。

  • ​beforeUnmount (Vue 3) / beforeDestroy (Vue 2)

    **触发时间:**组件实例被销毁之前​,在 onUnload ​之前触发。

    **使用位置:**此时实例仍可用,适合一些清理工作。

  • ​unmounted (Vue 3) / destroyed (Vue 2)

    **触发时间:**组件实例被销毁之后,在 onUnload ​之后触发​。

    **使用位置:**进行最终的清理。

计算属性

  • computed
    **触发时间:**当计算属性所依赖的数据发生变化时。
    **使用位置:**例如,根据商品列表和筛选条件,动态计算显示在页面上的最终列表。
相关推荐
三天不学习4 个月前
Uniapp 与 Uniapp X 对比:新手上手指南及迁移到 Uniapp X 的注意事项
uni-app·uniapp x