vue3 onmounted

作者：_永恒灬莫言发布日期:2026-03-05 浏览:74

<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!');
      // 可以在这里进行一些初始化操作，比如获取数据、设置定时器等
    });

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

<style scoped>
/* 样式代码 */
</style>

解释说明：

onMounted 是 Vue 3 中 Composition API 提供的一个生命周期钩子，它会在组件挂载完成后执行。
在这个例子中，当组件挂载完成后，会输出一条日志信息 "Component is mounted!" 到控制台。你可以在 onMounted 回调函数中执行任何需要在组件挂载后进行的操作，例如发起网络请求、初始化第三方库等。

上一篇：vue3 hooks

下一篇：vue3 axios