Vue 3 vue (Composition API) API Reference

`Reactivity`

5 methods

Reactivity APIs: ref, reactive, computed, watch, and watchEffect for managing reactive state.

ref<T>(value) -> Ref<T>

Creates a reactive reference wrapping a primitive or object; access the value via .value.

Parameters

Name	Type	Description
value	T	Initial value.

Returns

Ref<T>

Example

import { ref } from 'vue';
const count = ref(0);
count.value++;
console.log(count.value); // 1

reactive<T>(obj) -> UnwrapNestedRefs<T>

Returns a reactive proxy of an object; nested properties are also reactive. Do not replace the whole object.

Parameters

Name	Type	Description
obj	T	Plain object to wrap.

Returns

UnwrapNestedRefs<T>

Example

import { reactive } from 'vue';
const state = reactive({ count: 0 });
state.count++;
console.log(state.count); // 1

computed<T>(getter) -> ComputedRef<T>

Creates a read-only computed ref whose value is derived from reactive sources and cached until dependencies change.

Parameters

Name	Type	Description
getter	() => T	Pure getter function.

Returns

ComputedRef<T>

Example

import { ref, computed } from 'vue';
const count = ref(2);
const doubled = computed(() => count.value * 2);
console.log(doubled.value); // 4

watch(source, callback, options?)

Watches one or more reactive sources and runs a callback when they change, receiving new and old values.

Parameters

Name	Type	Description
source	Ref \| (() => any) \| Array	Reactive source(s) to watch.
callback	(newVal, oldVal, onCleanup) => void	Side-effect to run on change.
options	WatchOptions	Optional { immediate, deep, flush }.

Returns

StopHandle

Example

watch(count, (n, o) => {
  console.log('changed', o, '->', n);
}, { immediate: true });

watchEffect(effect) -> StopHandle

Runs an effect immediately and re-runs it whenever its reactive dependencies change. Tracks deps automatically.

Parameters

Name	Type	Description
effect	(onCleanup) => void	Effect function.

Returns

StopHandle

Example

watchEffect(() => {
  console.log('count is', count.value);
});

`Component`

4 methods

Component definition APIs: defineComponent, defineProps, defineEmits, and lifecycle hooks.

defineComponent(options) -> Component

Defines a component with full type inference for Options API or pre-typed components.

Parameters

Name	Type	Description
options	ComponentOptions	Component config: data, props, methods, computed, setup.

Returns

Component

Example

import { defineComponent } from 'vue';
export default defineComponent({
  props: { msg: String },
  setup(props) {
    return { upper: () => props.msg.toUpperCase() };
  },
});

defineProps<T>() / defineProps(arrayOrObject)

Compile-time macro inside <script setup> declaring component props with full type inference.

Returns

Props object

Example

<script setup lang="ts">
const props = defineProps<{ id: number; name?: string }>();
console.log(props.id);
</script>

defineEmits<T>() / defineEmits(arrayOrObject)

Compile-time macro declaring events a component can emit.

Returns

Emit function

Example

<script setup lang="ts">
const emit = defineEmits<{ (e: 'change', v: number): void }>();
emit('change', 42);
</script>

onMounted(callback)

Lifecycle hook called after the component has been mounted to the DOM.

Parameters

Name	Type	Description
callback	() => void	Hook callback.

Returns

void

Example

import { onMounted } from 'vue';
onMounted(() => {
  console.log('mounted');
});

`Composables`

3 methods

Convention for encapsulating reusable reactive logic as functions prefixed with 'use'.

useXxx(...args) -> { state, methods }

A user-defined composable that wraps reactive state and exposes it. By convention names start with 'use'.

Parameters

Name	Type	Description
args	any	Inputs to the composable.

Returns

object

Example

// useCounter.ts
import { ref } from 'vue';
export function useCounter(initial = 0) {
  const count = ref(initial);
  const inc = () => count.value++;
  return { count, inc };
}
// usage
const { count, inc } = useCounter(10);

useSlots() -> Slots

Returns the component's slots object for programmatic slot access in setup.

Returns

Slots

Example

import { useSlots } from 'vue';
const slots = useSlots();
console.log(slots.default?.());

useAttrs() -> Record<string, unknown>

Returns the component's fallthrough attributes (non-prop, non-emit) for programmatic access.

Returns

Record<string, unknown>

Example

import { useAttrs } from 'vue';
const attrs = useAttrs();
console.log(attrs.class);

All references