What are some examples of using the Composition API in Vue 3?

What are some examples of using the Composition API in Vue 3?

The Composition API in Vue 3 allows for better organization of code. For example, you can create a reusable function to manage state.

Can you show me a simple example of a counter using the Composition API?

Sure! Here's a basic counter example:

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    return { count, increment };
  }
};

This creates a reactive count variable and an increment function.

How can I use computed properties with the Composition API?

You can use the computed function from Vue. Here's an example:

import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);
    return { count, doubleCount };
  }
};

This creates a computed property that doubles the count.

What about using watchers in the Composition API?

You can use the watch function to react to changes. For example:

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);
    watch(count, (newValue) => {
      console.log(`Count changed to: ${newValue}`);
    });
    return { count };
  }
};

This will log the new count value whenever it changes.