How to Use ref in Vue: Simple Guide with Examples

In Vue, ref is used to create a reactive reference to a DOM element or a reactive data value. You declare it with const myRef = ref(initialValue) and access or update the value using myRef.value. This helps track changes reactively in your component.

Syntax

The ref function creates a reactive reference to a value or DOM element. You import it from Vue and use it like this:

• const myRef = ref(initialValue): creates a reactive reference holding initialValue.
• Access or update the value with myRef.value.
• For DOM elements, use ref="elementName" in template and const elementName = ref(null) in script.

javascript

import { ref } from 'vue'

const count = ref(0) // reactive number

// In template: <div ref="myDiv"></div>
const myDiv = ref(null) // reactive DOM element reference

Example

This example shows how to use ref to create a reactive counter and access a DOM element to change its style on button click.

vue

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <div ref="box" style="width:100px; height:100px; background:lightblue; margin-top:10px;">
      Box
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
const box = ref(null)

function increment() {
  count.value++
  if (box.value) {
    box.value.style.background = count.value % 2 === 0 ? 'lightblue' : 'lightgreen'
  }
}
</script>

Output

Count: 0
[Button labeled 'Increment']
[Box with lightblue background]

Clicking 'Increment' increases count and toggles box background color between lightblue and lightgreen.

Common Pitfalls

Common mistakes when using ref include:

• Forgetting to use .value to access or update the reactive value.
• Trying to use ref without importing it from Vue.
• Accessing DOM refs before the component is mounted, causing null errors.
• Using ref on primitive values but treating them like normal variables without .value.

javascript

import { ref } from 'vue'

const count = ref(0)

// Wrong: console.log(count) prints the ref object, not the value
console.log(count) // Ref object

// Right: access the value
console.log(count.value) // 0

// Wrong: Accessing DOM ref before mount
const box = ref(null)
console.log(box.value.style) // Error: box.value is null

// Right: Access DOM ref after mounted lifecycle or in event handlers

Quick Reference

Usage	Description	Example
Create reactive value	Wrap a value to make it reactive	const count = ref(0)
Access reactive value	Use .value to get or set	count.value = 5
Template DOM ref	Assign ref attribute to element
Script DOM ref	Declare ref variable for DOM	const box = ref(null)
Update DOM ref	Access DOM element via .value	box.value.style.color = 'red'

Key Takeaways

Use ref to create reactive references to data or DOM elements in Vue.

Always access or update the reactive value with .value.

Import ref from 'vue' before using it.

DOM refs are null until the component is mounted; access them in lifecycle hooks or event handlers.

Use ref in template with the same name declared in script for DOM elements.