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.

Practice

1. What does the mounted hook in a Vue directive do?

easy

A. Runs every time the component updates

B. Runs once when the directive is attached to the element

C. Runs when the directive is removed from the element

D. Runs only when the element is clicked

Solution

1. Step 1: Understand the purpose of mounted hook

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

2. Step 2: Compare with other hooks

   The updated hook runs on data or element changes, and unmounted runs when the directive is removed, so they do not match the description of mounted.

3. Final Answer:

   Runs once when the directive is attached to the element -> Option B

4. Quick Check:

   mounted = runs once on attach [OK]

Hint: Remember: mounted runs once when directive starts [OK]

Common Mistakes:

• Confusing mounted with updated hook
• Thinking mounted runs multiple times
• Mixing unmounted with mounted

2. Which of the following is the correct syntax to define the unmounted hook in a Vue directive?

easy

A. onUnmounted(el, binding) { /* code */ }

B. unmount(el, binding) { /* code */ }

C. destroyed(el, binding) { /* code */ }

D. unmounted(el, binding) { /* code */ }

Solution

1. Step 1: Recall the correct hook name

   The correct hook name for cleanup when a directive is removed is unmounted.

2. Step 2: Check syntax correctness

   The hook is defined as a function with parameters el and binding, so unmounted(el, binding) { /* code */ } is correct.

3. Final Answer:

   unmounted(el, binding) { /* code */ } -> Option D

4. Quick Check:

   Correct hook name is unmounted [OK]

Hint: Use exact hook names: unmounted, not unmount or destroyed [OK]

Common Mistakes:

• Using 'unmount' instead of 'unmounted'
• Confusing with lifecycle hooks like 'destroyed'
• Adding 'on' prefix incorrectly

3. Given this directive code, what will be logged when the bound element's text changes?

const myDirective = {
  mounted(el) {
    console.log('Mounted')
  },
  updated(el) {
    console.log('Updated')
  },
  unmounted(el) {
    console.log('Unmounted')
  }
}

medium

A. 'Mounted' then 'Updated' will log on text change

B. No logs will appear

C. 'Unmounted' will log on text change

D. Only 'Mounted' will log once

Solution

1. Step 1: Understand when each hook runs

   mounted runs once when directive attaches, updated runs on element or data changes, unmounted runs when directive is removed.

2. Step 2: Analyze the scenario

   When the element's text changes, the updated hook runs, so both Mounted (once) and Updated (on change) will log.

3. Final Answer:

   'Mounted' then 'Updated' will log on text change -> Option A

4. Quick Check:

   mounted once, updated on change [OK]

Hint: Updated logs on changes, mounted only once [OK]

Common Mistakes:

• Thinking updated runs only once
• Expecting unmounted to run on text change
• Ignoring mounted logs

4. Identify the error in this directive definition:

const directive = {
  mounted(el) {
    console.log('Mounted')
  },
  updated() {
    console.log('Updated')
  },
  unmounted(el) {
    console.log('Unmounted')
  }
}

medium

A. The mounted hook should not have parameters

B. The unmounted hook should be named 'destroyed'

C. The updated hook is missing the 'el' parameter

D. There is no error in this code

Solution

1. Step 1: Check parameters for each hook

   Directive hooks receive the element as the first parameter. The updated hook is missing the el parameter.

2. Step 2: Verify other hooks

   mounted and unmounted correctly have el parameter. The unmounted hook is correctly named.

3. Final Answer:

   The updated hook is missing the 'el' parameter -> Option C

4. Quick Check:

   All hooks need 'el' parameter [OK]

Hint: All directive hooks need 'el' parameter [OK]

Common Mistakes:

• Omitting parameters in hooks
• Confusing lifecycle hook names
• Assuming no parameters needed

5. You want to create a directive that adds a click event listener when attached and removes it when the directive is removed. Which hooks should you use to add and remove the listener?

hard

A. Add listener in mounted, remove in unmounted

B. Add listener in updated, remove in mounted

C. Add listener in unmounted, remove in updated

D. Add listener in updated, remove in updated

Solution

1. Step 1: Determine when to add event listener

   The listener should be added once when the directive attaches, so use mounted.

2. Step 2: Determine when to remove event listener

   Cleanup should happen when the directive is removed, so use unmounted to remove the listener.

3. Final Answer:

   Add listener in mounted, remove in unmounted -> Option A

4. Quick Check:

   mounted = add, unmounted = cleanup [OK]

Hint: Add in mounted, clean up in unmounted [OK]

Common Mistakes:

• Adding/removing listeners in updated hook
• Removing listener before adding it
• Using unmounted to add listener