Vue.js 中的 onBeforeMount 指令：在组件挂载前执行代码

<template>
  <div>{{ message }}</div>
</template>
<script lang='ts' setup>
  import { defineComponent, onBeforeMount } from 'vue';

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

      const message = 'Hello world';

      return {
        message,
      };
    },
  });
</script>
<p>在上面的例子中，我们通过 <code>onBeforeMount</code> 方法打印一条消息，用于验证组件即将挂载。注意，在 <code>setup()</code> 函数中定义的变量和函数必须通过 <code>return</code> 语句返回，才能在模板中使用。在这个例子中，我们返回了一个包含 <code>message</code> 变量的对象。</p>