All Visualizers

Vue.js Visualizer

Deep-dive interactive visualizations for Vue.js reactivity, composition API, component system, and advanced patterns

1
2
3
4

1. ref() — Wraps primitives in a reactive object

import { ref } from 'vue'

const count = ref(0)
// count is a Ref<number>
// Access value via count.value
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

// In templates, auto-unwrapped:
// <span>{{ count }}</span>  ← no .value needed
ref()
  • • Works with any value type
  • • Access via .value in script
  • • Auto-unwrapped in templates
  • • Can be reassigned entirely
reactive()
  • • Only for objects/arrays
  • • Direct property access
  • • Deep reactivity by default
  • • Cannot reassign root object