What are the differences between async/await and callbacks in Vue 3?

What are the differences between async/await and callbacks in Vue 3?

In Vue 3, async/await provides a cleaner syntax for handling asynchronous operations compared to callbacks. Callbacks can lead to 'callback hell', making code harder to read and maintain.

Can you give me an example of using async/await in a Vue 3 component?

Sure! Here's a simple example:

export default {
  async mounted() {
    try {
      const data = await fetchData();
      this.data = data;
    } catch (error) {
      console.error(error);
    }
  }
};

This fetches data when the component is mounted.

What about error handling with callbacks?

With callbacks, you typically pass an error as the first argument. For example:

fetchData((error, data) => {
  if (error) {
    console.error(error);
    return;
  }
  this.data = data;
});

Which method is preferred in modern Vue development?

Async/await is generally preferred due to its readability and ease of use, especially for complex asynchronous flows.