vue3 mounted

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

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const message = ref('Hello Vue 3!');

    // 使用 onMounted 钩子函数
    onMounted(() => {
      console.log('Component is mounted!');
      // 可以在这里执行一些初始化操作，比如获取数据、设置定时器等
      message.value = 'Component has been mounted!';
    });

    return {
      message,
    };
  },
};
</script>

<style scoped>
/* 样式代码可以根据需要添加 */
</style>

解释说明：

• ref：用于定义响应式数据。这里我们定义了一个名为 message 的响应式变量，并给它初始值 'Hello Vue 3!'。
• onMounted：这是 Vue 3 Composition API 中的一个生命周期钩子，类似于 Vue 2 中的 mounted。当组件挂载完成后，会执行这个钩子中的回调函数。
• 在 onMounted 中，我们可以通过 console.log 输出一条消息，表示组件已经挂载完成。同时，我们也可以修改响应式变量 message 的值，这会自动更新模板中的内容。

如果你在 setup 函数中返回了 message，那么在模板中就可以直接使用 {{ message }} 来显示它的值。