Directive hooks (mounted, updated, unmounted) in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the mounted hook in Vue directives?

The mounted hook runs when the directive is first attached to the element. It is used to set up initial behavior or manipulate the element when it appears in the DOM.

beginner

When is the updated hook called in a Vue directive?

The updated hook is called whenever the component's VNode updates and the directive's value or arguments might have changed. It lets you react to changes and update the element accordingly.

beginner

What does the unmounted hook do in Vue directives?

The unmounted hook runs when the directive is removed from the element or the element is destroyed. It is used to clean up event listeners or other side effects to avoid memory leaks.

intermediate

How do directive hooks help manage DOM elements in Vue?

Directive hooks let you run code at key moments: when the element appears (<code>mounted</code>), when it changes (<code>updated</code>), and when it disappears (<code>unmounted</code>). This helps keep the DOM in sync with your app logic.

intermediate

Example: What happens if you add an event listener in mounted but forget to remove it in unmounted?

If you don't remove the event listener in unmounted, it stays active even after the element is gone. This can cause memory leaks and unexpected behavior because the listener runs on elements that no longer exist.

Which Vue directive hook runs only once when the directive is first attached to the element?

A updated

B unmounted

C mounted

D created

The mounted hook runs once when the directive is attached to the element.

What is the main use of the updated hook in Vue directives?

A To respond to changes in the directive's value or arguments

B To run code when the directive is first attached

C To clean up event listeners

D To initialize component data

The updated hook runs when the directive's value or arguments change.

When should you use the unmounted hook in a Vue directive?

A To update the element's style

B To remove event listeners and clean up

C To add event listeners

D To fetch data from an API

The unmounted hook is for cleaning up, like removing event listeners.

If a directive needs to react to changes in its value, which hook should it use?

A updated

B unmounted

C mounted

D beforeMount

The updated hook runs when the directive's value changes.

What could happen if you forget to remove event listeners in the unmounted hook?

A The directive will not run

B The app will crash immediately

C The element will not render

D Memory leaks and unexpected behavior

Not removing listeners can cause memory leaks and bugs.

Explain the roles of the mounted, updated, and unmounted hooks in Vue directives.

Think about when the directive starts, changes, and ends.

Describe a scenario where forgetting to use the unmounted hook properly could cause problems.

Consider what happens when elements disappear but listeners stay.