Directive hooks (mounted, updated, unmounted) in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a Vue directive with a mounted hook.

Vue

const myDirective = {
  [1](el) {
    el.style.color = 'blue'
  }
}

Drag options to blanks, or click blank then click option'

Asetup

Bcreated

Cmounted

Drendered

Attempts:

3 left

💡 Hint

Common Mistakes

Using lifecycle hooks from components like 'created' instead of directive hooks.

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

2fill in blank

medium

Complete the code to update the element's text color when the directive updates.

Vue

const myDirective = {
  updated(el, binding) {
    el.style.color = [1]
  }
}

Drag options to blanks, or click blank then click option'

Ael.textContent

Bbinding.value

Cbinding.oldValue

Del.value

Attempts:

3 left

💡 Hint

Common Mistakes

Using binding.oldValue which is the previous value, not the current one.

The binding.value holds the new value passed to the directive.

3fill in blank

hard

Fix the error in the directive by completing the unmounted hook to clean up.

Vue

const myDirective = {
  unmounted(el) {
    el.[1] = null
  }
}

Drag options to blanks, or click blank then click option'

Aonclick

Bstyle

Cvalue

DtextContent

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to clear style or textContent which is not event cleanup.

Cleaning event handlers like onclick prevents memory leaks when the element is removed.

4fill in blank

hard

Fill both blanks to create a directive that changes background color on mount and cleans event on unmount.

Vue

const colorDirective = {
  [1](el) {
    el.style.backgroundColor = 'yellow'
  },
  [2](el) {
    el.onclick = null
  }
}

Drag options to blanks, or click blank then click option'

Amounted

Bupdated

Cunmounted

Dcreated

Attempts:

3 left

💡 Hint

Common Mistakes

Using updated instead of mounted for initial style.

The mounted hook sets styles when the element appears, and unmounted cleans event handlers when removed.

5fill in blank

hard

Fill all three blanks to create a directive that sets text color on mount, updates it on update, and removes click handler on unmount.

Vue

const textColorDirective = {
  [1](el) {
    el.style.color = 'green'
  },
  [2](el, binding) {
    el.style.color = [3]
  },
  unmounted(el) {
    el.onclick = null
  }
}

Drag options to blanks, or click blank then click option'

Amounted

Bupdated

Cbinding.value

Dcreated

Attempts:

3 left

💡 Hint

Common Mistakes

Using created which is not a directive hook.

Not using binding.value to get the new color.

mounted sets initial color, updated changes color when value changes, and binding.value holds the new color.

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