uniapp组合式 生命周期

### UniApp 组合式 API 生命周期函数使用说明

在 UniApp 中，组合式 API 提供了一种更加灵活的方式用于组织和重用代码逻辑。对于生命周期管理而言，组合式 API 使得开发者可以在 `setup` 函数内部注册各种生命周期钩子[^3]。

#### 创建阶段
当组件实例刚被创建时可以利用 `onBeforeMount` 和 `onMounted` 来执行初始化操作。前者会在挂载之前调用，后者则是在 DOM 被渲染之后立即调用。这允许开发人员根据需求选择合适的时机来加载数据或设置初始状态[^1]。

import { onBeforeMount, onMounted } from 'vue';

export default {
  setup() {
    onBeforeMount(() => {
      console.log('Component is about to be mounted.');
    });

    onMounted(() => {
      console.log('Component has been successfully mounted.');
    });
    
    return {};
  }
}

#### 更新阶段
每当组件重新渲染前后都可以分别通过 `onBeforeUpdate` 及 `onUpdated` 进行相应的处理工作。这些钩子可以帮助我们跟踪视图的变化并作出反应，比如调整样式或是清理不必要的资源[^2]。

import { onBeforeUpdate, onUpdated } from 'vue';

export default {
  setup() {
    onBeforeUpdate(() => {
      console.log('Component is about to update its view.');
    });

    onUpdated(() => {
      console.log('Component\'s view has updated.');
    });
    
    return {};
  }
}

#### 销毁阶段
为了确保良好的性能表现以及防止内存泄漏，在组件即将卸载的时候应该释放掉不再使用的对象或者取消订阅事件等动作。此时就可以借助于 `onBeforeUnmount` 和 `onUnmounted` 完成上述任务。

import { onBeforeUnmount, onUnmounted } from 'vue';

export default {
  setup() {
    const cleanupFunction = () => {
      // Cleanup logic here...
    };

    onBeforeUnmount(cleanupFunction);

    onUnmounted(() => {
      console.log('Component will soon be destroyed.');
    });
    
    return {};
  }
}

此外，针对特定平台的应用场景如微信小程序、H5网页等，还可以引入额外的页面级生命周期方法，例如 `onLoad`, `onReady`, `onHide`, `onShow` 等，它们同样遵循类似的模式来进行声明和使用[^4][^5]。