Template refs for DOM access in Vue - Step-by-Step Execution

Concept Flow - Template refs for DOM access

Template renders

↓

Ref attribute set on element

↓

Vue creates ref object

↓

ref.value points to DOM element

↓

Access DOM via ref.value in script

↓

Manipulate or read DOM element

Vue renders the template, sets the ref attribute, creates a ref object, and links ref.value to the DOM element for script access.

Execution Sample

Vue

<template>
  <button ref="btnRef">Click me</button>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const btnRef = ref(null)
onMounted(() => {
  btnRef.value.focus()
})
</script>

This code sets a template ref on a button and focuses it when the component mounts.

Execution Table

Step	Action	Ref Value Before	Ref Value After	Effect
1	Component starts rendering	null	null	No DOM yet
2	Template creates <button> with ref="btnRef"	null	null	Button element created but ref not linked yet
3	Vue links btnRef.value to button DOM element	null	<button>	btnRef.value now points to button
4	onMounted hook runs	<button>	<button>	btnRef.value.focus() called
5	Button receives focus	<button>	<button>	Button is focused in browser

💡 Component fully mounted, ref linked, and DOM accessed

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
btnRef.value	null	<button>	<button>	<button>

Key Moments - 3 Insights

Why is btnRef.value null before the template renders?

Before rendering, the DOM element does not exist, so btnRef.value is null as shown in execution_table step 1 and 2.

How does Vue link the ref to the actual DOM element?

Vue sets btnRef.value to the DOM element after creating it in the template, as seen in execution_table step 3.

Why can we call btnRef.value.focus() safely inside onMounted?

Because onMounted runs after the DOM is rendered and btnRef.value is linked, so the button element exists (step 4).

Visual Quiz - 3 Questions

Look at the execution_table, what is btnRef.value at step 2?

A undefined

B <button>

C null

D a string 'btnRef'

💡 Hint

Check the 'Ref Value After' column at step 2 in execution_table

At which step does btnRef.value first point to the button DOM element?

A Step 1

B Step 3

C Step 4

D Step 5

💡 Hint

Look for when 'Ref Value After' changes from null to

If we tried to call btnRef.value.focus() before step 3, what would happen?

A An error or no effect because btnRef.value is null

B btnRef.value would be undefined

C The button would be focused successfully

D The button would be clicked automatically

💡 Hint

Refer to variable_tracker and execution_table steps 1 and 2 where btnRef.value is null

Concept Snapshot

Template refs let you access DOM elements in Vue templates.
Use ref="name" on an element.
In script, create a ref variable with ref(null).
After rendering, ref.value points to the DOM element.
Use onMounted to safely access DOM via ref.value.
Useful for focus, measurements, or direct DOM manipulation.

Full Transcript

In Vue, template refs let you get direct access to DOM elements. You add ref="btnRef" on a button in the template. In the script, you create btnRef with ref(null). When Vue renders the template, it creates the button element but btnRef.value is still null until Vue links it. After linking, btnRef.value points to the button DOM element. You can then call methods like btnRef.value.focus() safely inside the onMounted hook because the DOM is ready. This process helps you interact with the DOM directly in a controlled way.