setup()
The Composition API entry hook where reactive state and logic are defined.
Syntax
setup(props, context) { ... return bindings }Parameters
| Name | Type | Required | Description |
|---|---|---|---|
props | object | No | Reactive component props. |
context | object | No | Exposes attrs, slots, emit, expose. |
Returns
object | render fn — Bindings exposed to the template.
Examples
<script lang="ts">
import { ref, defineComponent } from 'vue';
export default defineComponent({
props: { start: { type: Number, default: 0 } },
setup(props) {
const count = ref(props.start);
return { count };
},
});
</script>
<template><button @click="count++">{{ count }}</button></template>
Notes
setup() runs before the component is created, so `this` is unavailable. In
Single File Components prefer `<script setup>`, which compiles to setup() with
less boilerplate and auto-exposed bindings. Destructuring props loses
reactivity; use toRefs() or props directly.