[vue2] mixin에 대해

✅ Mixin

• mixin을 사용하면 mixin의 모든 옵션이 → mixin을 사용하는 컴포넌트에 혼합됨
      (mixin의 script에서 사용되는 모든 옵션 다 혼합됨! import, created...등등)
  
  
• mixin과 사용하는 컴포넌트에 중첩되는 옵션이 있으면 : 컴포넌트의 옵션이 우선하여 적용된다.

 

• mixin에 정의된 함수(Hooks)가 컴포넌트에 정의된 함수보다 먼저 호출된다.

// MyMixin.js
export default {
  created() {
    console.log("My mixin");
  },
};

// Component.vue
<script>
import MyMixin from "../mixins/MyMixin";
export default {
  mixins: [MyMixin],
  created() {
    console.log("component1");
  },
};
</script>

     // 결과 : My mixin , component1

 

 

✅ 전역 Mixin

- mixin을 전역으로 사용할 수 있다.

- 전역 mixin은 사용자 지정 옵션 처리에만! 사용하는게 좋다.

- 생성된 모든 vue인스턴스(컴포넌트)와 서드파티 컴포넌트에도 영향 미치게 된다. ← 때문에 신중히 사용해야 함.

 

globalMixin.js

export default {
  created() {
    console.log("global mixin");
  },
};

main.js

import Vue from 'vue'
import globalMixin from "./mixins/globalMixin";

Vue.mixin(globalMixin);

new Vue({
  render: (h) => h(App)
}).$mount("#app");

 

처음 렌더시 컴포넌트 8개가 실행되기 떄문에

 

global mixin은 모든 컴포넌트가 렌더됨에 따라 여러번 실행된다.

 

 

 

 

 

✅ mixin의 단점

1. 코드 파악이 어렵다.

 컴포넌트에 주입되는 로직이 명시적이지 않아 어떤 mixin이 사용되는지 한눈에 파악하기 어렵다.

공감... 오늘 회사에서 mixin이 사용된 컴포넌트를 봤는데 mixin의 어느 부분 때문에 이 컴포넌트가 이렇게 작동되는지 파악하는데 시간이 걸리곤 했다.

게다가 mixin코드 중 컴포넌트에 영향을 미치고 있지 않는 코드들도 있어서 그 부분을 거르고 보는데도 번거로웠다.(잘못된 mixin인듯)

 

2. 동일 이름 충돌

mixin과 컴포넌트에 동일한 이름의 메서드를 정의하는 실수를 범할 수 있다.

마치 var를 사용하면 재선언이 가능한 것 처럼 위험하다.

이럴 경우 컴포넌트에 정의한 메서드가 우선하여 실행하기 때문에 의도와 다른 동작이 실행될 수 있다.

 

3. 컴포넌트 재사용성 감소

컴포넌트가 mixin과 결합되있기 떄문에 다른 곳에서  재사용하기 어렵다.

 

👉  vue3에서는 이런 단점을 개선하기 위해 composition API를 사용한다.

 

 

 

 

---

https://v2.ko.vuejs.org/v2/guide/mixins.html

믹스인 — Vue.js

https://iu-corner.tistory.com/entry/Vue2-%EB%8D%94-%EC%9D%B4%EC%83%81-%EB%AF%B9%EC%8A%A4%EC%9D%B8%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EB%A9%B4-%EC%95%88%EB%90%A9%EB%8B%88%EB%8B%A4