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
  **触发时间：**当计算属性所依赖的数据发生变化时。
  **使用位置：**例如，根据商品列表和筛选条件，动态计算显示在页面上的最终列表。