Composable vs mixin comparison in Vue - Performance Comparison

Performance: Composable vs mixin comparison

MEDIUM IMPACT

This affects page load speed and interaction responsiveness by influencing JavaScript execution and component rendering.

Sharing reusable logic across Vue components

Vue

import { ref, onMounted } from 'vue';

export function useCounter() {
  const count = ref(0);
  function increment() {
    count.value++;
  }
  onMounted(() => {
    console.log('Composable mounted');
  });
  return { count, increment };
}

export default {
  setup() {
    const { count, increment } = useCounter();
    return { count, increment };
  }
}

Composables encapsulate logic explicitly, avoid option merging, and leverage Vue's reactivity system more efficiently.

📈 Performance Gainreduces redundant reactivity setups and avoids conflicts, improving interaction responsiveness

Sharing reusable logic across Vue components

Vue

const myMixin = {
  created() {
    console.log('Mixin created');
  },
  methods: {
    sharedMethod() {
      console.log('Shared logic');
    }
  }
}

export default {
  mixins: [myMixin],
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}

Mixins merge options causing potential naming conflicts and duplicate code execution, increasing component initialization time.

📉 Performance Costtriggers multiple reactivity setups and redundant method bindings per component instance

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Mixin	No direct DOM ops, but causes duplicated reactive setups	Multiple reactivity recalculations	Minimal paint impact	[X] Bad
Composable	No direct DOM ops, single reactive setup per usage	Single reactivity recalculation	Minimal paint impact	[OK] Good

Rendering Pipeline

Mixins merge component options causing extra work in setup and reactivity initialization, while composables run explicit functions that create reactive state and lifecycle hooks more efficiently.

→JavaScript Execution

→Reactivity Setup

→Component Initialization

⚠️ BottleneckReactivity Setup due to duplicated or merged logic

Core Web Vital Affected

INP

This affects page load speed and interaction responsiveness by influencing JavaScript execution and component rendering.

Optimization Tips

1Avoid option merging by preferring composables over mixins.

2Use composables to isolate reactive logic and lifecycle hooks.

3Check for duplicated reactive setups to improve interaction performance.

Performance Quiz - 3 Questions

Which pattern generally leads to fewer duplicated reactive setups in Vue?

A Global event bus

B Composable functions

C Mixins

D Inline methods

DevTools: Performance

How to check: Record a performance profile while interacting with components using mixins and composables; compare scripting and rendering times.

What to look for: Look for duplicated reactive effect setups and longer scripting times in mixin usage compared to composables.

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