vue3 onbeforemount

作者：潇洒一醉发布日期:2025-02-24 浏览:104

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

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

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

    // onBeforeMount 钩子函数会在组件挂载之前调用
    onBeforeMount(() => {
      console.log('Component is about to be mounted');
      // 可以在这里执行一些初始化操作，比如获取数据
      message.value = 'Data loaded before mount';
    });

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

解释说明：

onBeforeMount 是 Vue 3 中的一个生命周期钩子函数，它在组件挂载之前被调用。
在这个示例中，我们在 onBeforeMount 钩子函数中修改了 message 的值，并且打印了一条日志信息到控制台。
当组件即将挂载时，onBeforeMount 钩子会被触发，此时可以执行一些初始化操作，比如从服务器获取数据、设置初始状态等。

上一篇：vue 异步请求

下一篇：vue2 teleport