Setup function

Thesetupfunction is the heart of the Composition API in Vue 3. It's a new option that's added to a component, and it's where you define reactive state, computed properties, methods, and lifecycle hooks. It replaces thedata,methods,computed, andwatchoptions found in the Options API.

Whysetup?

• Logic Reusability:Easily extract and reuse component logic into composable functions.
• Better Organization:Group related logic together, improving readability and maintainability.
• Type Inference:Works seamlessly with TypeScript.
• Flexibility:Offers more control over component logic structure.
• Tree-shaking:Enables smaller bundle sizes by removing unused code.

Basic Structure

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};
</script>

Explanation:

1. setup()Function:Executedbeforethe component is created and defines all logic.
2. ref():Creates a reactive reference. Updates tocount.valuetrigger UI updates.
3. increment():A function that mutates the reactive state.
4. return:Exposes values to the template (e.g.,{{ count }}).

Key Concepts & APIs withinsetup

• ref():Reactive primitive or object with.value.
• reactive():Deeply reactive objects.
• computed():Automatically recalculated derived values.
• watch():Reacts to specific state changes.
• watchEffect():Automatically tracks dependencies.
• provide/inject:Dependency sharing without prop drilling.
• Lifecycle Hooks:UseonMounted,onUpdated, etc.

Example: Usingreactiveandcomputed

<template>
  <div>
    <p>First Name: {{ person.firstName }}</p>
    <p>Last Name: {{ person.lastName }}</p>
    <p>Full Name: {{ fullName }}</p>
    <button @click="updateLastName">Update Last Name</button>
  </div>
</template>

<script>
import { reactive, computed } from 'vue';

export default {
  setup() {
    const person = reactive({
      firstName: 'John',
      lastName: 'Doe'
    });

    const fullName = computed(() => {
      return person.firstName + ' ' + person.lastName;
    });

    const updateLastName = () => {
      person.lastName = 'Smith';
    };

    return {
      person,
      fullName,
      updateLastName
    };
  }
};
</script>

Example: Using Lifecycle Hooks

<template>
  <div>
    <p>Component is mounted!</p>
  </div>
</template>

<script>
import { onMounted } from 'vue';

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

    return {};
  }
};
</script>

Composables

Composables are reusable logic functions that help keep components clean and focused.

// composables/useCounter.js
import { ref } from 'vue';

export function useCounter(initialValue = 0) {
  const count = ref(initialValue);

  const increment = () => {
    count.value++;
  };

  const decrement = () => {
    count.value--;
  };

  return {
    count,
    increment,
    decrement
  };
}

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { useCounter } from './composables/useCounter';

export default {
  setup() {
    const { count, increment, decrement } = useCounter(10);

    return {
      count,
      increment,
      decrement
    };
  }
};
</script>

In Summary:

Thesetupfunction provides a flexible, organized, and reusable way to manage Vue component logic using the Composition API.