What are the lifecycle hooks in Vue 3's setup script?

What are the lifecycle hooks in Vue 3's setup script?

In Vue 3, lifecycle hooks in the setup script include onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, and onUnmounted. These hooks allow you to run code at specific points in a component's lifecycle.

Can you give me an example of using onMounted?

Sure! Here's a simple example:

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component is mounted!');
    });
  }
};

This will log a message to the console when the component is mounted.

What about using onBeforeUnmount?

You can use onBeforeUnmount to perform cleanup before the component is removed from the DOM. For example:

import { onBeforeUnmount } from 'vue';

export default {
  setup() {
    const timer = setInterval(() => {
      console.log('Running...');
    }, 1000);

    onBeforeUnmount(() => {
      clearInterval(timer);
      console.log('Cleanup before unmount!');
    });
  }
};

This will clear the interval when the component is about to unmount.

Are there any other hooks I should know about?

Yes, besides the ones mentioned, you might also find onActivated and onDeactivated useful for handling components in keep-alive.