Composable vs mixin comparison in Vue - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a composable function in Vue 3.

Vue

import { [1] } from './useCounter';

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

AuseCounter

BmixinCounter

CCounterMixin

DcounterFunction

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to import a mixin as a composable function.

Using incorrect capitalization or naming.

Composable functions in Vue 3 are usually named starting with 'use' and imported by their exact name.

2fill in blank

medium

Complete the code to add a mixin to a Vue component.

Vue

export default {
  [1]: [counterMixin],
  setup() {
    // component logic
  }
};

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

Acomposables

Bcomponents

Cmixins

Dmethods

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'composables' instead of 'mixins'.

Placing mixins inside 'methods' or 'components'.

Mixins are added to the 'mixins' option in Vue components.

3fill in blank

hard

Fix the error in the composable usage inside the setup function.

Vue

setup() {
  const { count, increment } = [1]();
  return { count, increment };
}

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

AcounterFunction

BuseCounter

CCounterMixin

DcounterMixin

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to call a mixin as a function inside setup.

Using incorrect function names.

Composable functions are called inside setup and return reactive state and methods.

4fill in blank

hard

Fill both blanks to define a mixin and use it in a component.

Vue

const counterMixin = {
  data() {
    return { count: 0 };
  },
  methods: {
    [1]() {
      this.count++;
    }
  }
};

export default {
  [2]: [counterMixin]
};

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

Aincrement

Bmixins

Csetup

Dmethods

Attempts:

3 left

💡 Hint

Common Mistakes

Naming the method incorrectly.

Placing mixins under wrong component options.

The method to increase count is named 'increment', and mixins are added in the 'mixins' array.

5fill in blank

hard

Fill all three blanks to create a composable and use it in a component's setup.

Vue

import { [1] } from './useCounter';

export default {
  setup() {
    const { [2], [3] } = useCounter();
    return { [2], [3] };
  }
};

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

AuseCounter

Bcount

Cincrement

DcounterMixin

Attempts:

3 left

💡 Hint

Common Mistakes

Importing or using mixins instead of composables.

Using wrong variable names inside setup.

The composable is imported as 'useCounter', and inside setup we extract 'count' and 'increment' from it.

Practice

1. Which statement best describes the main difference between a mixin and a composable in Vue?

easy

A. Mixins are functions, and composables use Vue options like data and methods.

B. Composables are only used in Vue 2, mixins only in Vue 3.

C. Mixins and composables are exactly the same in Vue.

D. Mixins use Vue options like data and methods, while composables are functions using the Composition API.

Solution

1. Step 1: Understand mixin structure

   Mixins use Vue's Options API with properties like data, methods, and lifecycle hooks.

2. Step 2: Understand composable structure

   Composables are plain functions that use Vue's Composition API to share reactive logic.

3. Final Answer:

   Mixins use Vue options like data and methods, while composables are functions using the Composition API. -> Option D

4. Quick Check:

   Mixin = Options API, Composable = Composition API [OK]

Hint: Mixins use options; composables are functions with Composition API [OK]

Common Mistakes:

• Confusing mixins as functions
• Thinking composables use Options API
• Believing mixins and composables are identical

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

easy

A. function useCounter() { this.count = 0; }

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

C. export default { methods: { useCounter() { return 0; } } }

D. export const useCounter = { data() { return { count: 0 }; } }

Solution

1. Step 1: Identify composable function pattern

   Composable functions are plain functions that return reactive state or methods, often prefixed with 'use'.

2. Step 2: Check syntax correctness

   export function useCounter() { const count = ref(0); return { count }; } defines a function returning a reactive ref, which matches composable pattern.

3. Final Answer:

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

4. Quick Check:

   Composable = function returning reactive state [OK]

Hint: Composable is a function returning reactive refs or state [OK]

Common Mistakes:

• Using object syntax instead of function
• Not returning reactive state
• Using 'this' inside composable function

3. Given this mixin and component code, what will be logged when the button is clicked?

const myMixin = {
  data() { return { count: 0 }; },
  methods: { increment() { this.count++; console.log(this.count); } }
}

export default {
  mixins: [myMixin],
  template: `Click`
}

medium

A. Logs 1, 2, 3 on each click

B. Logs 0 every time

C. Throws an error because count is undefined

D. Logs NaN on each click

Solution

1. Step 1: Understand mixin data and methods

   The mixin provides a reactive count starting at 0 and an increment method that increases count and logs it.

2. Step 2: Check component usage

   The component uses the mixin, so count and increment are available. Each click calls increment, increasing count by 1 and logging it.

3. Final Answer:

   Logs 1, 2, 3 on each click -> Option A

4. Quick Check:

   Mixin data + method increments count [OK]

Hint: Mixin data is reactive and shared in component [OK]

Common Mistakes:

• Assuming count resets each click
• Thinking count is undefined
• Confusing mixin with composable behavior

4. Identify the error in this composable usage inside a Vue component:

import { ref } from 'vue';

function useTimer() {
  const time = ref(0);
  setInterval(() => time.value++, 1000);
  return { time };
}

export default {
  setup() {
    const timer = useTimer;
    return { timer };
  },
  template: `
{{ timer.time }}
`
}

medium

A. setInterval should be inside setup, not composable

B. ref is not imported correctly

C. The composable function is not called; should be useTimer()

D. template syntax is invalid

Solution

1. Step 1: Check composable invocation

   The composable useTimer is assigned without parentheses, so timer is a function reference, not the returned object.

2. Step 2: Understand impact on template

   Since timer is a function, accessing timer.time is undefined, causing template to fail or show nothing.

3. Final Answer:

   The composable function is not called; should be useTimer() -> Option C

4. Quick Check:

   Call composable as function: useTimer() [OK]

Hint: Call composable with () to get returned state [OK]

Common Mistakes:

• Forgetting parentheses when calling composable
• Moving setInterval outside composable unnecessarily
• Misreading template syntax

5. You want to share reactive state and methods between multiple components in Vue 3. Which approach is better and why?

Choose the best option and explain why.

hard

A. Composables share reactive logic clearly and safely with better TypeScript support.

B. Mixins share data and methods but can cause naming conflicts and unclear code.

C. Copy-pasting code is simple but leads to maintenance problems.

D. Global variables break reactivity and make debugging hard.

Solution

1. Step 1: Evaluate mixins drawbacks

   Mixins can cause naming conflicts and make code harder to understand because they merge properties invisibly.

2. Step 2: Evaluate composables benefits

   Composables are explicit functions that return reactive state and methods, improving clarity, reusability, and TypeScript support.

3. Step 3: Consider other options

   Copy-pasting duplicates code, and global variables break Vue's reactivity system.

4. Final Answer:

   Composables share reactive logic clearly and safely with better TypeScript support. -> Option A

5. Quick Check:

   Composable = clear, safe, reusable logic [OK]

Hint: Prefer composables for clear, reusable reactive logic [OK]

Common Mistakes:

• Choosing mixins despite conflicts
• Ignoring reactivity with global variables
• Thinking copy-paste is maintainable