Vue Mixins

🧬 Mixins

vue 공식문서

Mixins는 Vue 컴포넌트에 재사용 가능한 기능을 배포하는 유연한 방법입니다. mixin 객체는 모든 구성 요소 옵션을 포함할 수 있습니다. 컴포넌트에 mixin을 사용하면 해당 mixin의 모든 옵션이 컴포넌트의 고유 옵션에 “혼합”됩니다.

컴포넌트의 고유 옵션에 “혼합”?

우선 간단히 사용해 보자면

• mixin 객체 생성후
  
• mixin을 사용할 컴포넌트에 정의
  

동일한 이름을 가진 라이프 사이클 훅 함수는 배열로 합쳐져 모두 호출되는데

• mixin의 훅 함수가 먼저 호출 되고, 그 후 컴포넌트의 훅 함수가 호출 된다.
  

• 그럼 동일한 메소드 가있는 경우엔?
  

앞서 정의된 라이프 사이클 훅 모두 호출되는 것과 달리 메소드의 경우 덮어쓰게 된다.

즉 mixin하는 여러 컴포넌트에서 동일한 함수가 있는 경우,
배열 순서 상 나중에 등록된 컴포넌트의 함수를 호출한다.

따라서 믹스인을 중첩해서 사용하려고 할 경우에는 라이프 사이클 훅 이벤트를 활용해 사용하면 👌

🖋 정리

• 각 컴포넌트는 mixin 을 통해 동일한 기능을 사용하게 된다(코드 재사용 가능성⬆).
• 기능을 컴포넌트들이 공유하는 것이 아닌 상속을 받는 개념이다.
• 각 컴포넌트는 신뢰할 수 있는 동작을 보장 받는다.
• 오버라이딩 기능도 사용할 수 있어 커스텀 및 확장에 용이하다.