Vue.js前端框架教程10：Vue生命周期钩子onBeforeMount 和onMounted

Cachel wood2024-12-21 13:55

文章目录

生命周期钩子

在 Vue 3 中，onBeforeMount 和 onMounted 是生命周期钩子，它们在组件的生命周期中的不同阶段被调用。这些钩子通常用于执行与 DOM 相关的操作，例如数据获取、设置 DOM 元素或者执行副作用。

以下是这两个生命周期钩子的详细说明：

onBeforeMount

onBeforeMount 钩子在组件第一次挂载到 DOM 之前被调用，此时组件的模板已经渲染成 HTML，但还没有插入文档中。在这个钩子中，组件的响应式属性已经可用，但它们还没有被渲染到 DOM 中。

javascript 复制代码

import { onBeforeMount } from 'vue';

export default {
  setup() {
    onBeforeMount(() => {
      // 在这里执行代码，组件模板已经渲染，但还没有挂载到 DOM
      console.log('组件即将挂载');
    });
  }
};

onMounted

onMounted 钩子在组件第一次挂载到 DOM 之后被调用。此时，组件的模板已经渲染并插入到文档中，可以执行 DOM 相关的操作，如访问子组件实例或子元素。

javascript 复制代码

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      // 在这里执行代码，组件已经挂载到 DOM
      console.log('组件已经挂载');
    });
  }
};

使用示例

以下是一个简单的 Vue 3 组件示例，展示了如何使用 onBeforeMount 和 onMounted：

html 复制代码

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

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

const message = ref('Hello, Vue!');

onBeforeMount(() => {
  console.log('组件即将挂载，模板已渲染但未插入 DOM');
});

onMounted(() => {
  console.log('组件已经挂载到 DOM');
});
</script>

在这个示例中：

message 是一个响应式引用，用于存储组件中显示的消息。
onBeforeMount 钩子在组件即将挂载时被调用，此时模板已经渲染但还没有插入 DOM。
onMounted 钩子在组件已经挂载到 DOM 后被调用。

这些生命周期钩子可以帮助你更好地控制组件的初始化和挂载过程，确保在正确的时间执行特定的操作。