Composable vs mixin comparison in Vue - Visual Side-by-Side Comparison

Concept Flow - Composable vs mixin comparison

Start Component

↓

Use Mixin

↓

Mixin Adds Methods/State

↓

Component Uses Mixin

↓

Render with Mixin Behavior

↓

Use Composable

↓

Composable Returns Reactive State/Functions

↓

Component Calls Composable

↓

Render with Composable Behavior

↓

Compare Results

↓

End

This flow shows how a Vue component uses either a mixin or a composable to add behavior and state, then renders with that behavior.

Execution Sample

Vue

import { ref } from 'vue'

// Mixin
const counterMixin = {
  data() { return { count: 0 } },
  methods: { increment() { this.count++ } }
}

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

Defines a mixin and a composable that both provide a count and an increment function.

Execution Table

Step	Action	Mixin State	Composable State	Output Behavior
1	Component created with mixin	count = 0	N/A	count shown as 0
2	Call mixin increment()	count = 1	N/A	count updates to 1
3	Component created with composable	N/A	count = 0	count shown as 0
4	Call composable increment()	N/A	count = 1	count updates to 1
5	Render component with mixin	count = 1	N/A	UI shows count = 1
6	Render component with composable	N/A	count = 1	UI shows count = 1
7	End	Final mixin count = 1	Final composable count = 1	Both behave similarly

💡 Execution stops after both mixin and composable states increment and render correctly.

Variable Tracker

Variable	Start	After Step 2	After Step 4	Final
mixin count	0	1	1 (unchanged)	1
composable count	N/A	N/A	1	1

Key Moments - 3 Insights

Why does the mixin's count appear directly on 'this', but the composable's count uses '.value'?

The mixin uses Vue's Options API where data properties are reactive on 'this'. The composable uses the Composition API with refs, so reactive values are accessed with '.value'. See execution_table steps 2 and 4.

Can multiple components share state using mixins or composables?

Mixins copy their data per component instance, so state is separate. Composables can share state if designed to do so (e.g., using a shared ref outside the function). This difference affects reuse and state sharing.

Why is composable considered more flexible than mixin?

Composables are plain functions returning reactive state and methods, allowing better code organization and reuse without merging component options. Mixins merge options which can cause conflicts. See how composable returns count and increment in execution_sample.

Visual Quiz - 3 Questions

Look at the execution_table, what is the mixin count after step 2?

A 0

B 1

C N/A

D 2

💡 Hint

Check the 'Mixin State' column at step 2 in execution_table.

At which step does the composable count first update?

A Step 4

B Step 2

C Step 1

D Step 6

💡 Hint

Look at 'Composable State' column in execution_table for when count changes from 0 to 1.

If the composable returned a plain number instead of a ref, what would happen?

A The count would still update reactively

B Mixin would stop working

C The count would not update reactively in the UI

D Component would crash

💡 Hint

Recall that reactive state in composables uses refs; see execution_sample and key_moments about '.value'.

Concept Snapshot

Composable vs Mixin in Vue:
- Mixins merge options (data, methods) into component instance
- Composables are functions returning reactive state and methods
- Mixins use 'this' for reactive data; composables use refs with '.value'
- Composables offer better code reuse and avoid option conflicts
- Both can provide similar behavior but differ in flexibility and state sharing

Full Transcript

This visual execution compares Vue mixins and composables. The mixin adds reactive data and methods directly on the component instance using the Options API. The composable is a function returning reactive refs and functions using the Composition API. The execution table traces component creation, calling increment functions, and rendering. Both approaches update a count from 0 to 1 and render it. Variable tracking shows mixin count on 'this' and composable count as a ref. Key moments clarify why composables use '.value', how state sharing differs, and why composables are more flexible. The quiz tests understanding of state changes and reactivity differences. The snapshot summarizes key differences and usage patterns.

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