Core Concepts

ref(value) — a reactive box around any value

Creates a reactive reference. Primitives (string, number, boolean) are tracked directly; objects and arrays are transparently handed to reactive().

const count = ref(0);
count.value++; // Triggers reactive updates

const user = ref({ name: 'John' });
user.value.name = 'Jane'; // Reactive, same as reactive({ name: 'John' })

// In templates, .value is automatically unwrapped:
// {{ count }} / {{ user.name }} instead of {{ count.value }} / {{ user.value.name }}

reactive(object) — for objects and arrays

Returns a deep reactive proxy of an object or array. This is what ref() uses internally for non-primitive values - reach for it directly when you don't need a separate box, just a reactive object.

const state = reactive({
    user: { name: 'John', age: 30 },
    todos: ['Learn Wrium']
});

// All nested properties are reactive
state.user.age = 31;
state.todos.push('Build an app');

Array reactivity: every array method is fully reactive.

• Mutators: push, pop, shift, unshift, splice, sort, reverse, fill, copyWithin
• Iterators: map, filter, find, findIndex, findLast, findLastIndex, every, some, forEach, reduce, reduceRight, flat, flatMap, values, entries, keys, includes, indexOf, lastIndexOf

computed(getter)

Creates a lazily evaluated, memoized reactive value.

const firstName = ref('John');
const lastName = ref('Doe');

const fullName = computed(() => `${firstName.value} ${lastName.value}`);

console.log(fullName.value); // "John Doe"
firstName.value = 'Jane';
console.log(fullName.value); // "Jane Doe"

watchEffect(fn, opts?)

Runs a reactive effect immediately and re-runs it whenever a dependency it read changes.

const count = ref(0);

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

count.value++; // Logs: "Count is: 1"
stop(); // Stop watching

nextTick(fn)

Runs fn after the DOM has been updated with the latest reactive changes. Effects are batched and flushed on a microtask, not synchronously.

count.value++;
nextTick(() => {
    console.log(document.querySelector('#count').textContent); // already updated
});

Template Interpolation

Text nodes containing {{ expression }} are automatically reactive:

<p>Hello, {{ name }}!</p>
<p>You have {{ items.length }} items.</p>
<p>Total: {{ price * quantity }}</p>

v-pre

Skips compiling an element and its entire subtree - takes priority over every other directive on the same element. Useful for showing literal {{ }} syntax (e.g. in docs) or embedding a third-party widget's markup untouched:

<code v-pre>{{ this is never evaluated }}</code>

Continue with Directives.