微信小程序-开发篇-页面生命周期 #onShow #onLoad

微信小程序的加载生命周期包括以下几个阶段：

App 生命周期：

onLaunch：小程序初始化时触发，全局只触发一次。
onHide：小程序从前台进入后台时触发。

页面生命周期：

    onLoad：页面加载时触发，只触发一次。
    onShow：页面显示时触发。
    onReady：页面初次渲染完成时触发。
    created：组件实例刚刚被创建时触发。
    attached：组件被添加到页面节点树中时触发。
    ready：组件布局完成时触发。
    moved：组件被移动到另一个节点时触发。
    detached：组件被从页面节点树中移除时触发。

以上是微信小程序加载的生命周期，不同的生命周期函数可以用于执行不同的操作，例如初始化数据、发送网络请求、更新页面等

onLoad

在Vue 3中，onLoad是一个生命周期钩子函数，用于在组件加载时执行特定的逻辑。它可以在组件实例创建之后、组件挂载之前被调用。
在使用Vue 3 + TypeScript时，你可以通过以下步骤来使用onLoad：

首先，在组件的选项对象中定义onLoad方法。例如：

import { defineComponent } from ‘vue’;

export default defineComponent({ name: ‘MyComponent’, onLoad() {
// 在组件加载时执行的逻辑 },
});

这样，在组件加载时，onLoad方法中的逻辑将会被执行。

需要注意的是，onLoad方法只能在根组件中使用，不能在子组件中使用。如果你需要在子组件中执行特定的逻辑，可以考虑使用其他生命周期钩子函数，如onMounted。

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

// 在组件加载时执行的操作
onMounted(() => {
  // 模拟异步请求数据
  setTimeout(() => {
    message.value = 'Hello, Vue 3!';
  }, 1000);
});

// 响应式数据
const message = ref('');
</script>