How do I use the setup function in Vue 3 for advanced features?

How do I use the setup function in Vue 3 for advanced features?

The setup function in Vue 3 allows you to use Composition API features. You can define reactive state, computed properties, and methods all in one place. What specific advanced features are you interested in?

Can you explain how to use reactive and ref in the setup function?

Sure! You can use reactive to create a reactive object and ref for primitive values. For example:

import { reactive, ref } from 'vue';

export default {
  setup() {
    const state = reactive({ count: 0 });
    const message = ref('Hello, Vue!');

    function increment() {
      state.count++;
    }

    return { state, message, increment };
  }
};

What about using computed properties in the setup function?

You can use the computed function to create computed properties. Here's an example:

import { computed } from 'vue';

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

    return { count, doubleCount };
  }
};

How can I handle lifecycle hooks in the setup function?

You can use lifecycle hooks like onMounted and onUnmounted directly in the setup function. For example:

import { onMounted, onUnmounted } from 'vue';

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

    onUnmounted(() => {
      console.log('Component is unmounted!');
    });
  }
};