reactive()
Returns a deeply reactive proxy of an object.
Syntax
reactive<T extends object>(target: T): TParameters
| Name | Type | Required | Description |
|---|---|---|---|
target | object | No | The source object to make reactive. |
Returns
T — A reactive proxy of the original object.
Examples
<script setup lang="ts">
import { reactive } from 'vue';
const state = reactive({ count: 0, user: { name: 'Ada' } });
function inc() {
state.count++;
}
</script>
<template>
<button @click="inc">{{ state.count }}</button>
</template>
Notes
reactive only works on objects, arrays, Map, and Set (not primitives) and
tracks deeply nested properties. Do not destructure or reassign the proxy or
you lose reactivity; use toRefs() to destructure safely. For primitives or
reassignable state prefer ref().