Why composables matter in Vue - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use composables in Vue 3?

What is the main benefit of using composables in Vue 3's Composition API?

A They automatically optimize rendering performance without extra code.

B They allow reusing logic across components without duplicating code.

C They replace templates with plain JavaScript functions for UI rendering.

D They enforce strict typing on component props and events.

💡 Hint

Think about how you can share code between components easily.

Composables let you extract and reuse reactive logic in multiple components, avoiding repetition and improving maintainability.

❓ component_behavior

intermediate

Effect of composable on component state

Given this composable and component code, what will be the value of count after clicking the button twice?

Vue

import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);
  function increment() {
    count.value++;
  }
  return { count, increment };
}

// In component setup:
const { count, increment } = useCounter();

// Button click calls increment()

A 2

B 0

C 1

D undefined

💡 Hint

Each click calls increment() which increases count by 1.

The count ref starts at 0 and increments by 1 on each button click, so after two clicks it becomes 2.

❓ lifecycle

advanced

Composables and component lifecycle hooks

Which lifecycle hook is best to use inside a composable to run code when the component using it is mounted?

A setup

B created

C beforeDestroy

D onMounted

💡 Hint

Consider when the DOM is ready for interaction.

onMounted runs after the component is mounted to the DOM, making it ideal for composables needing to run code at that time.

📝 Syntax

advanced

Correct syntax for a composable function

Which option shows the correct syntax for a Vue 3 composable that provides a reactive message and a function to update it?

A

import { ref } from 'vue';
export function useMessage() {
  const message = ref('Hello');
  function updateMessage(newMsg) {
    message.value = newMsg;
  }
  return { message, updateMessage };
}

B

import { reactive } from 'vue';
export function useMessage() {
  const message = reactive('Hello');
  function updateMessage(newMsg) {
    message = newMsg;
  }
  return { message, updateMessage };
}

C

export function useMessage() {
  let message = 'Hello';
  function updateMessage(newMsg) {
    message = newMsg;
  }
  return { message, updateMessage };
}

D

import { ref } from 'vue';
export function useMessage() {
  const message = ref('Hello');
  function updateMessage(newMsg) {
    message = newMsg;
  }
  return { message, updateMessage };
}

💡 Hint

Remember how to update a ref value properly.

Option A correctly uses ref and updates message.value. Other options misuse reactive or assign directly to ref variable.

🔧 Debug

expert

Why does this composable cause shared state bug?

Consider this composable used in multiple components. Why do all components share the same count value?

import { ref } from 'vue';
const count = ref(0);
export function useSharedCounter() {
  function increment() {
    count.value++;
  }
  return { count, increment };
}

A Because <code>increment</code> does not update <code>count.value</code> correctly.

B Because <code>ref</code> does not create reactive state inside composables.

C Because <code>count</code> is declared outside the function, so it's shared across all uses.

D Because the composable is missing a return statement.

💡 Hint

Think about where variables are declared and how that affects sharing.

Declaring count outside the composable function creates a single shared reactive variable used by all components, causing shared state.

Practice

1. Why are composables important in Vue applications?

easy

A. They compile Vue templates into JavaScript.

B. They automatically style components without CSS.

C. They replace the need for Vue Router.

D. They help reuse logic across multiple components easily.

Solution

1. Step 1: Understand composables' purpose

   Composables are functions that let you reuse logic in Vue components.

2. Step 2: Identify the correct benefit

   They help keep components clean by sharing logic, not styling or routing.

3. Final Answer:

   They help reuse logic across multiple components easily. -> Option D

4. Quick Check:

   Reusing logic = composables importance [OK]

Hint: Composables = reusable logic functions in Vue [OK]

Common Mistakes:

• Thinking composables handle styling
• Confusing composables with routing
• Believing composables compile templates

2. Which of the following is the correct way to define a composable in Vue 3?

easy

A. function useCounter() { const count = ref(0); return { count }; }

B. const useCounter = new VueComponent() { count: 0 }

C. class useCounter { count = 0; }

D. const useCounter = () => { this.count = 0; }

Solution

1. Step 1: Recall composable syntax

   Composables are functions that return reactive state or methods.

2. Step 2: Check each option

   function useCounter() { const count = ref(0); return { count }; } defines a function returning a reactive ref, which is correct. Others misuse class, VueComponent, or this context.

3. Final Answer:

   function useCounter() { const count = ref(0); return { count }; } -> Option A

4. Quick Check:

   Composable = function returning reactive state [OK]

Hint: Composable must be a function returning reactive data [OK]

Common Mistakes:

• Using class syntax for composables
• Trying to use 'this' inside arrow functions
• Confusing composables with components

3. Given this composable:

function useToggle() {
  const on = ref(false);
  function toggle() { on.value = !on.value; }
  return { on, toggle };
}

What will be the value of on.value after calling toggle() twice starting from initial state?

medium

A. undefined

B. true

C. false

D. null

Solution

1. Step 1: Understand initial state

   The ref on starts as false.

2. Step 2: Apply toggle twice

   First toggle flips false to true. Second toggle flips true back to false.

3. Final Answer:

   false -> Option C

4. Quick Check:

   Toggle twice returns to initial false [OK]

Hint: Toggle flips boolean; two flips return to start [OK]

Common Mistakes:

• Assuming toggle only flips once
• Confusing ref.value with ref itself
• Expecting undefined or null values

4. What is wrong with this composable code?

function useData() {
  const data = ref(null);
  fetch('api/data').then(response => {
    data.value = response.json();
  });
  return { data };
}

medium

A. fetch returns a promise, so data.value is set to a promise, not actual data.

B. ref cannot hold null values initially.

C. The composable should not return data.

D. fetch cannot be used inside composables.

Solution

1. Step 1: Analyze fetch usage

   fetch returns a promise; response.json() also returns a promise.

2. Step 2: Identify mistake in assigning data.value

   Assigning data.value = response.json() sets it to a promise, not resolved data.

3. Final Answer:

   fetch returns a promise, so data.value is set to a promise, not actual data. -> Option A

4. Quick Check:

   response.json() returns promise, must await [OK]

Hint: Remember to await response.json() before assigning [OK]

Common Mistakes:

• Not awaiting response.json()
• Thinking ref can't start as null
• Believing fetch is disallowed in composables

5. You want to share a composable that tracks window width and updates reactively on resize. Which approach correctly uses Vue composables to achieve this?

hard

A. function useWindowWidth() {
const width = window.innerWidth;
window.addEventListener('resize', () => {
width.value = window.innerWidth;
});
return { width };
}

B. function useWindowWidth() {
const width = ref(window.innerWidth);
onMounted(() => {
window.addEventListener('resize', () => {
width.value = window.innerWidth;
});
});
onUnmounted(() => {
window.removeEventListener('resize', () => {
width.value = window.innerWidth;
});
});
return { width };
}

C. function useWindowWidth() {
const width = window.innerWidth;
window.onresize = () => {
width = window.innerWidth;
};
return { width };
}

D. function useWindowWidth() {
const width = ref(0);
setInterval(() => {
width.value = window.innerWidth;
}, 1000);
return { width };
}

Solution

1. Step 1: Understand reactive state and lifecycle

   We need reactive width and proper event listener cleanup to avoid leaks.

2. Step 2: Evaluate options for lifecycle management

   function useWindowWidth() { const width = ref(window.innerWidth); onMounted(() => { window.addEventListener('resize', () => { width.value = window.innerWidth; }); }); onUnmounted(() => { window.removeEventListener('resize', () => { width.value = window.innerWidth; }); }); return { width }; } uses onMounted and onUnmounted to add and remove listeners correctly, ensuring cleanup.

3. Final Answer:

   function useWindowWidth() { const width = ref(window.innerWidth); onMounted(() => { window.addEventListener('resize', () => { width.value = window.innerWidth; }); }); onUnmounted(() => { window.removeEventListener('resize', () => { width.value = window.innerWidth; }); }); return { width }; } -> Option B

4. Quick Check:

   Use lifecycle hooks to add/remove listeners [OK]

Hint: Add and remove listeners in lifecycle hooks for cleanup [OK]

Common Mistakes:

• Not removing event listeners causing memory leaks
• Using non-reactive variables for width
• Using setInterval instead of event listeners