Directive hooks (mounted, updated, unmounted) in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a Vue directive's mounted hook runs?

Consider a custom directive in Vue 3 using the mounted hook. What is the main purpose of this hook?

A It runs when the directive is removed from the element, to clean up resources.

B It runs every time the component updates, to refresh the directive's behavior.

C It runs once when the directive is first attached to the element, allowing setup like event listeners.

D It runs before the element is inserted into the DOM.

💡 Hint

Think about when you want to set up something once when the element appears.

The mounted hook in Vue directives runs once when the directive is first bound to the element and inserted into the DOM. It's used to set up things like event listeners or initial styles.

❓ component_behavior

intermediate

When does the updated hook of a Vue directive run?

In Vue 3, what triggers the updated hook of a custom directive?

A Every time the component's reactive data changes and the element is re-rendered.

B Only when the directive is unbound from the element.

C When the directive is first bound to the element.

D Before the element is inserted into the DOM.

💡 Hint

Think about when the element's content or attributes might change after initial render.

The updated hook runs after the containing component has updated and the element has been re-rendered. It lets you respond to changes in the element or its data.

❓ lifecycle

advanced

What is the correct order of Vue directive hooks when an element is inserted, updated, and then removed?

Arrange the Vue directive hooks in the order they are called during the element's lifecycle: insertion, update, removal.

A 2,1,3

B 1,2,3

C 3,1,2

D 1,3,2

💡 Hint

Think about the lifecycle from element creation to removal.

The mounted hook runs first when the element is inserted. Then updated runs on reactive updates. Finally, unmounted runs when the element is removed.

🔧 Debug

advanced

Why does this Vue directive's unmounted hook not run?

Given this directive code, the unmounted hook never triggers. What is the likely cause?

export default {
  mounted(el) { console.log('mounted'); },
  updated(el) { console.log('updated'); },
  // unmounted hook missing
}

A Because the directive must use <code>beforeUnmount</code> instead.

B Because the <code>updated</code> hook prevents <code>unmounted</code> from running.

C Because the element is never removed from the DOM.

D Because the <code>unmounted</code> hook is not defined in the directive object.

💡 Hint

Check if the hook function exists in the directive.

If the unmounted hook is not defined, Vue has no code to run when the element is removed. Defining it is necessary for cleanup.

📝 Syntax

expert

Which Vue directive hook signature is correct for accessing the element and binding value?

Select the correct syntax for a Vue 3 directive hook that accesses the element and the binding value.

A mounted(el, binding) { console.log(binding.value); }

B mounted(binding, el) { console.log(binding.value); }

C mounted(el) { console.log(el.binding.value); }

D mounted(el, binding, vnode) { console.log(vnode.value); }

💡 Hint

Remember the order of parameters in directive hooks.

The correct order is el first, then binding. The binding object contains the value.