Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<script setup> import { ref, reactive, toRefs, watchEffect } from 'vue'; // ── ref ────────────────────────────────────── const count = ref(0); const message = ref('Hello'); count.value++; // mutate via .value console.log(count.value); // 1 // ── reactive ───────────────────────────────── const state = reactive({ name: 'Alice', age: 30 }); state.age++; // no .value needed console.log(state.name, state.age); // ── toRefs: safe destructure ────────────────── const { name, age } = toRefs(state); name.value = 'Bob'; // still linked to state // ── watchEffect: auto-tracks dependencies ───── watchEffect(() => { console.log('count is now', count.value); console.log('name is now', name.value); }); // ── Reactive array ───────────────────────────── const items = ref([]); items.value.push({ id: 1, label: 'First' }); </script> <template> <p>{{ count }} — {{ state.name }}</p> </template>
Result
Open