Template refs for DOM access in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a template ref in Vue?

A template ref is a way to directly access a DOM element or a component instance inside the Vue template using a special attribute called ref. It helps you interact with the element or component in your script.

beginner

How do you define a template ref on an element in Vue 3 Composition API?

You add <code>ref="name"</code> to the element in the template, then in the script use <code>const name = ref(null)</code> and Vue will link the DOM element to this variable after rendering.

intermediate

Why should you avoid manipulating the DOM directly in Vue?

Vue manages the DOM for you reactively. Direct DOM manipulation can cause conflicts or unexpected behavior. Template refs should be used carefully and mostly for things Vue can't handle, like focusing an input.

beginner

How do you access a DOM element using a template ref in Vue 3?

After defining a ref in the template and script, you access the DOM element with name.value. For example, inputRef.value.focus() sets focus on the input element.

intermediate

What is the difference between ref and reactive in Vue?

ref creates a reactive reference to a single value or DOM element, accessed with .value. reactive creates a reactive object with multiple properties. Template refs use ref for DOM access.

How do you declare a template ref for a DOM element in Vue 3 Composition API?

A Use <code>ref="name"</code> in template and <code>const name = ref(null)</code> in script

B Use <code>v-model="name"</code> in template and <code>const name = reactive({})</code> in script

C Use <code>id="name"</code> in template and <code>document.getElementById('name')</code> in script

D Use <code>ref="name"</code> in template and <code>const name = reactive(null)</code> in script

Template refs require the ref attribute in the template and a matching ref variable in the script initialized to null.

What is the correct way to access the DOM element from a template ref named inputRef?

A <code>inputRef.value</code>

B <code>inputRef</code>

C <code>inputRef.dom</code>

D <code>inputRef.element</code>

In Vue 3, refs are accessed with .value to get the actual DOM element or value.

When is it appropriate to use template refs in Vue?

A To replace all reactive data binding

B To declare global variables

C To style elements with CSS

D To directly manipulate DOM elements when Vue cannot handle it

Template refs are used for direct DOM access when needed, like focusing inputs, but not for general reactive data.

Which Vue API is used to create a reactive reference for template refs?

A computed()

B reactive()

C ref()

D watch()

ref() creates a reactive reference suitable for template refs.

What will happen if you try to access a template ref before the component is mounted?

A It will return the DOM element immediately

B It will be null or undefined

C It will throw a syntax error

D It will automatically mount the component

Template refs are only set after the component is mounted, so before that they are null.

Explain how to use template refs in Vue 3 to focus an input element after the component loads.

Think about linking template and script with ref, then using lifecycle to access DOM.

Describe the difference between using template refs and reactive data in Vue.

Consider when you want to change the UI vs when you want to reach the actual element.