Vue.js의 Mixins이란?

🔥 Vue 2에서는 Mixins 사용이 유용하지만, Vue 3에서는 Composition API (setup())를 추천!

---

 

 

✅ Mixins 장점
✔ 여러 컴포넌트에서 동일한 기능을 쉽게 재사용 가능
✔ 라이프사이클 훅, 데이터, 메서드까지 포함 가능

 

❌ Mixins 단점
✔ 데이터 및 메서드 충돌 가능 (우선순위 문제 발생)
✔ 코드의 출처가 명확하지 않아 유지보수 어려움
✔ Vue 3에서는 Composition API가 더 선호됨

 

---

 

Mixins는 Vue.js에서 코드의 재사용성을 높이기 위해 사용되는 기능이다.

 

여러 컴포넌트에서 공통적으로 사용되는 로직(예: 데이터, 메서드, 라이프사이클 훅 등)을 하나의 mixin 파일로 정의하고, 이를 필요한 컴포넌트에서 mixins 옵션을 통해 포함할 수 있다.

 

공통 또는 자주 사용하는 함수 정의

// mixins/commonMixin.js
export default {
  data() {
    return {
      message: "Hello from mixin!",
    };
  },
  methods: {
    greet() {
      console.log(this.message);
    },
  },
  created() {
    console.log("Mixin의 created 훅 실행");
  },
};

 

컴포넌트에서 사용

// components/MyComponent.vue
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="greet">인사하기</button>
  </div>
</template>

<script>
import commonMixin from "@/mixins/commonMixin.js";

export default {
  mixins: [commonMixin], // Mixin 추가
};
</script>

 

 

Vue3 에서는 자주 사용하는 함수를 모아서 조합할 수 있다.

setup() 함수에서 불러와서 사용한다.

 

// composables/useCommon.js
import { ref } from "vue";

export function useCommon() {
  const message = ref("Hello from Composition API!");
  
  const greet = () => {
    console.log(message.value);
  };

  return { message, greet };
}

 

// components/MyComponent.vue
<template>
  <p>{{ message }}</p>
  <button @click="greet">인사하기</button>
</template>

<script>
import { useCommon } from "@/composables/useCommon.js";

export default {
 setup() {
  return useCommon();
 }
};
</script>

 

vue 3.2 이후 버전에서는 다음과 같이 사용함.

// components/MyComponent.vue
<template>
  <p>{{ message }}</p>
  <button @click="greet">인사하기</button>
</template>

<script setup>
import { useCommon } from "@/composables/useCommon.js";

const { message, greet } = useCommon();
</script>