Vue 3 + Ts 生命周期钩子函数的使用 #onShow() #onMounted() #onBeforeMount

在Vue 3和TypeScript中，组件的生命周期钩子可以使用Composition API的onMounted, onBeforeMount, onShow（仅限于使用了uni-app框架的情况）。

以下是一个简单的例子：

<template>
  <div>{{ message }}</div>
</template>
 
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
 
export default defineComponent({
  setup() {
    const message = ref('Hello, Vue 3!');
 
    onMounted(() => {
      console.log('组件已挂载');
    });
 
    onBeforeMount(() => {
      console.log('即将挂载组件');
    });
 
    // 如果是在uni-app中，可以使用onShow
    onShow(() => {
      console.log('页面显示/切入前台');
    });
 
    return { message };
  },
});
</script>

在这个例子中，onMounted 在组件挂载完成后触发，onBeforeMount 在组件挂载之前触发。如果你使用的是uni-app，可以使用onShow钩子，它会在页面显示/切入前台时触发。

请注意，这些生命周期钩子只能在setup函数内部被调用，并且它们应该直接在setup函数作用域内被调用，不应该在任何函数内部或者在return语句之外调用。