Vue Mixin(믹스인) 사용법과 장단점

Minxin 란?

Mixins는 Vue 컴포넌트에서 코드를 재사용할 수 있는 방법입니다.

언제 사용하면 좋을까?

Vue 컴포넌트에서 HTML과 Style은 재사용이 가능합니다.

컴포넌트가 비슷한 로직을 가지고 있으면 Mixins를 사용하는 것이 좋습니다.

 

예를 들면,

회원 정보 List를 조회하는 컴포넌트(UserList)와 프로젝트 List를 조회하는 컴포넌트(ProjectList)가 있으면

컴포넌트 초기화 이후 데이터를 조회하고, List 컴포넌트를 만드는 로직이 비슷하다면

Mixins을 통해서 코드를 재사용하고, 중복 소스를 제거할 수 있습니다.

사용법

mixins 폴더를 생성하고 listMixin.js 파일을 생성합니다.

 

listMixin.js

export default {
  data(): {
     return {
        items: []
     }
  }
  methods: {
    getList() {
      this.items = [
         { name: 'superman' },
         { name: 'batman' },
         { name: 'pororo' }
      ]
    }
  }
}

UserList.vue

<template>
  <ul>
     <li v-for="(name, idx) in items" :key=idx>name</li>
  </ul>
</template>

<script>
import listMixin from './listMixin';

export default {
  mixins: [listMixin],
}
</script>

전역 Mixins 사용법

Vue 전체 컴포넌트에서 Mixin을 만들어 사용할 수 있습니다.

전체 컴포넌트에서 공통으로 사용하는 로직이 있다면 전역 Mixin을 사용하면 좋습니다만,

주로 사용하는 방법은 아닙니다.

 

GlobalMixin.js

export default {
  created() {
    console.log('created');
  },
}

main.js

import Vue from 'vue';
import App from './App.vue';
import GlobalMixin from './GlobalMixin';

Vue.mixin(GlobalMixin);

const app = Vue.createApp(App);
app.mount('#app');

 

Mixin 단점

재사용이 가능하고, 중복 코드를 제거할 수 있는 Mixin도 단점이 있습니다.

 

본인이 개발할 때는 Mixin 메서드가 어디에서 사용되고 어디에 있는지 알 수 있지만,

여러 개발자와 동시에 개발하고 한 컴포넌트에 여러 개의 Mixin이 있으면 현재 함수가 어디 Mixin인지 찾기 어려운 단점이 있습니다.

 

이런 단점을 해소하기 위해 Vue에서 컴포지션 API가 있습니다.

Vue3 - Composables 이용하여 함수 재사용 하기

 

이상으로 믹스인 사용법과 장단점이었습니다.

감사합니다.