Why custom directives matter in Vue - Challenge Your Understanding

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a custom directive updates an element?

Consider a Vue 3 component using a custom directive that changes the background color of an element when the directive's value changes. What will be the background color after the value updates from 'red' to 'blue'?

Vue

const app = Vue.createApp({
  data() {
    return { color: 'red' };
  },
  template: `<div v-color-bg="color">Hello</div>`
});

app.directive('color-bg', {
  beforeMount(el, binding) {
    el.style.backgroundColor = binding.value;
  },
  updated(el, binding) {
    el.style.backgroundColor = binding.value;
  }
});

const vm = app.mount('#app');

// Then later in code: vm.color = 'blue';

A The background color will be blue after the update.

B The background color will remain red because updated hook is not called.

C The background color will be removed because the directive does not handle unmount.

D The background color will be green by default.

💡 Hint

Think about which directive lifecycle hook runs when the bound value changes.

The 'updated' hook in the custom directive runs whenever the bound value changes, so the background color updates from red to blue.

🧠 Conceptual

intermediate

Why use custom directives instead of methods for DOM manipulation?

Which reason best explains why custom directives are preferred for direct DOM manipulation in Vue over using methods inside components?

A Custom directives run only once, methods run multiple times causing performance issues.

B Methods cannot access the DOM at all in Vue components.

C Custom directives encapsulate DOM logic and keep templates clean, while methods are for data logic.

D Methods automatically update the DOM without needing directives.

💡 Hint

Think about separation of concerns between DOM and data logic.

Custom directives are designed to handle direct DOM manipulation cleanly, keeping component templates and logic focused on data and state.

📝 Syntax

advanced

Identify the correct syntax for a Vue 3 custom directive definition

Which option shows the correct way to define a Vue 3 custom directive that logs a message when the element is mounted?

A

app.directive('log', {
  mounted(el) {
    console.log('Element mounted');
  }
});

B

app.directive('log', (el) => {
  console.log('Element mounted');
});

C

app.directive('log', {
  bind(el) {
    console.log('Element mounted');
  }
});

D

app.directive('log', {
  created(el) {
    console.log('Element mounted');
  }
});

💡 Hint

Check Vue 3 directive lifecycle hook names.

In Vue 3, the correct hook for when the element is inserted into the DOM is 'mounted'. The 'bind' and 'created' hooks are from Vue 2 and invalid here.

🔧 Debug

advanced

Why does this custom directive fail to update on value change?

Given this directive code, why does the element's text color not update when the bound value changes? app.directive('text-color', { beforeMount(el, binding) { el.style.color = binding.value; } });

A Because 'beforeMount' runs after the element is removed from DOM.

B Because the directive lacks an 'updated' hook to handle value changes.

C Because 'binding.value' is undefined in 'beforeMount'.

D Because the directive should use 'mounted' instead of 'beforeMount'.

💡 Hint

Consider which lifecycle hooks run when the value changes.

'beforeMount' runs only once before the element is inserted. To react to value changes, the 'updated' hook must be implemented.

❓ state_output

expert

What is the final text content after directive and reactive state update?

In this Vue 3 example, what will be the final text content of the

element after the button is clicked? const app = Vue.createApp({ data() { return { count: 0 }; }, template: `

Initial

` }); app.directive('text-update', { mounted(el, binding) { el.textContent = `Count is ${binding.value}`; }, updated(el, binding) { el.textContent = `Count is ${binding.value}`; } }); app.mount('#app');

A The text content will be empty after clicking the button.

B "Initial" remains because directives do not update textContent.

C "Count is 0" even after clicking the button.

D "Count is 1" after clicking the button once.

💡 Hint

Think about how the directive updates textContent on reactive changes.

The directive updates the textContent on mount and on updates. Clicking the button increments count, triggering the updated hook to change the text.