该篇文章是关于Vue 3 生命周期的钩子函数的使用（setup语法糖下）

1. Vue 3 + Ts 关于onShow() 的使用

在Vue 3中，onShow是一个生命周期钩子函数，用于在组件显示时执行特定的逻辑。在setup语法糖中，可以使用onShow来实现类似的功能。下面是一个使用onShow的Vue 3 结合< script setup lang=“Ts” >的示例。

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

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

const message = ref('');

onShow(() => {
  message.value = 'Component is shown';
});
</script>

在上面的示例中，首先导入了onShow和ref函数。然后，创建了一个响应式的message变量，并将其初始值设置为空字符串。
接下来，使用onShow函数来定义在组件显示时执行的逻辑。在这个例子中，将message的值设置为’Component is shown’。
最后，在模板中使用message变量来显示消息。
这样，当组件显示时，onShow函数会被调用，message的值会更新，从而在模板中显示出来。

2. Vue 3中setup语法糖下onMounted和onBeforeMount钩子函数的使用

2.1 onMounted ()

注册一个回调函数，在组件挂载完成后执行。

onBeforeMount（）

在组件挂载之前执行的操作

案例：

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

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

// 在组件挂载之前执行的操作
onBeforeMount(() => {
  console.log('组件挂载之前');
});

// 在组件挂载之后执行的操作
onMounted(() => {
  console.log('组件挂载之后');
});

// 响应式数据
const message = ref('Hello, Vue 3!');
</script>