Detailed explanation and usage method of onMounted in Vue3

introduction

In Vue 3,onMountedis a life cycle hook that executes code after component instances are mounted on the DOM. It is part of a composite API that allows us to manage lifecycles more flexibly in components. This article will introduce in detailonMountedusage, characteristics and common scenarios.

What is a life cycle hook?

In Vue, a life cycle hook is a special method that a component calls at different stages of its life cycle. Vue 3 provides a set of lifecycle hooks that help us execute specific code when components are created, updated, and destroyed.onMountedIt is one of them.

Basic usage of onMounted

Introduced

To useonMounted, need tovueImport it in the package:

import { onMounted } from 'vue';

Example

Here is a simple example showing how to useonMounted：

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

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

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

    onMounted(() => {
      ('Component mounted to DOM');
      // You can obtain data or other operations here    });

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

In this example, when the component is mounted to the DOM, the console outputs a message.

Features of onMounted

• Called only once：onMountedIt will only be called when the component is first mounted. If the component's state changes and is not uninstalled, it will not be called again.

• Asynchronous operation：onMountedCan be used to perform asynchronous operations, such as data requests. Performing these actions after mount ensures that the component's DOM is ready.

• Used in conjunction with other life cycle hooks：onMountedUsually hooked with other life cycles (such asonBeforeMountandonUnmounted) Use together to implement more complex component logic.

Common usage

1. Data acquisition

Usually after the component is mounted, we need to get the data and render it. Can be inonMountedCalling API:

onMounted(async () => {
  const response = await fetch('/data');
  const data = await ();
  // Update data status});

2. DOM operation

onMountedIt can also be used to operate DOM directly. For example, initialize a chart or use a third-party library:

import { onMounted } from 'vue';

onMounted(() => {
  const chart = new Chart(('myChart'), {
    // chart configuration
  });
});

3. Event monitoring

Add event listeners after component mounts and clear them on uninstall:

onMounted(() => {
  ('resize', handleResize);
});

onUnmounted(() => {
  ('resize', handleResize);
});

Things to note

• Component destruction: Make sure to beonUnmountedClean up operations that may cause memory leaks, such as event listeners and timers.

• Responsive data: If it isonMountedModify the responsive data to ensure the use of the responsive API provided by Vue (such asrefandreactive) to keep the data responsive.

• Use scenarios：onMountedNot suitable for initializing the basic state of a component (such as props), it is more suitable for performing operations that need to rely on DOM or external data.

Summarize

This is the end of this article about the detailed explanation and usage of onMounted in Vue3. For more detailed explanation of Vue3 onMounted, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!