What are some examples of using the Vue Composition API?

What are some examples of using the Vue Composition API?

The Vue Composition API allows you to organize and reuse logic in Vue components. Here are a few examples:

1. Reactive State: You can create reactive state using ref and reactive.
2. Computed Properties: Use computed to create derived state.
3. Lifecycle Hooks: Use onMounted, onUpdated, etc., to manage component lifecycle.
4. Custom Composition Functions: Create reusable functions that encapsulate logic.

Can you show me a code example for reactive state?

Sure! Here's a simple example:

import { ref } from 'vue';

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

In this example, count is a reactive reference that updates the UI when changed.

What about computed properties?

Here's how you can use computed properties:

import { ref, computed } from 'vue';

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

In this example, doubleCount will automatically update whenever count changes.

Can you explain how to use lifecycle hooks?

Certainly! Here's an example using the onMounted lifecycle hook:

import { onMounted } from 'vue';

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

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