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

画月的亮2024-01-23 20:44

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

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

java 复制代码

<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的值会更新，从而在模板中显示出来。