[Vue] Mixins & Extends

Vue 프로젝트를 진행하면서 컴포넌트 기능이 중복이 발생하는 경우가 많이 생겼다.

 

그럴땐 Extends, Mixins 를 사용하여 재활용을 하면 된다.

 

Mixins

• Mixins는 Vue 컴포넌트에 재사용 가능한 기능을 배포하는 유연한 방법
• mixins은 전역으로 적용할 수 있음
  • (주의) 전역으로 적용하면 이후에 생성된 모든 Vue 인스턴스 에 영향을 줌
    따라서, 적게 이용하고 신중하게 사용하기

사용 예제 

<template>
  <div id="app" class="color-red">
    {{ num }} <br>
    {{ msg }} <br>
    <button @click="clicked">click</button>
  </div>
</template>

<script>
import Extends from './components/Extends.vue'
import Mixins1 from './components/Mixins1.vue'
import Mixins2 from './components/Mixins2.vue'
import Mixins3 from './components/Mixins3'

export default {
	name: 'App',
  extends: Extends,
  mixins: [Mixins1, Mixins2, Mixins3],
	created() {
		console.log('App created');
	},
	methods: {
		clicked() {
			alert('App clicked!');
		}
	}
}

 

결론적으로 말하면 extends, mixins를 사용하면 다른 컴포넌트의 데이터, 메소드 등 기능들을 해당 컴포넌트로 이관이 가능하다.

• created(lifecycle hook) 은 extends -> mixins -> 컴포넌트 순으로 실행됨
  mixins 배열 중에서는 앞에서부터 순서대로 실행됨
• method 'clicked'은 우선순위가 높은 App.vue의 것으로 override 됨
  (우선순위 : 컴포넌트 > mixins(배열 역순) > extends)
• template 이나 style 은 우선순위가 높은 것으로 적용됨

정리

• mixins과 extends의 차이점은 mixins은 배열로 여러 개 받을 수 있고, extends는 하나만 받음
  (그 외에는 mixins과 extends가 거의 같기 때문에, mixins을 사용하는 것을 추천)
• mixins과 extends를 모두 사용하고 있는 컴포넌트에서 우선순위는 '컴포넌트 > mixins(배열 역순) > extends'
  (컴포넌트의 우선순위가 가장 높음)
• 중복되는 lifecycle hook 은 extends -> mixins (배열 순서대로) -> 컴포넌트 순으로 실행됨
• 그 외 옵션 (data, methods, components 등)은 중복된 경우, 우선순위가 높은 것으로 override 됨
• mixin은 컴포넌트 간 공통 기능의 관리 측면에서 접근하고,
  extends는 베이스 컴포넌트가 있는 상태에서 이를 확장할 때 사용 (상속)
  (extends를 예를 들면, 날짜를 선택할 수 있는 DatePicker 의 자식으로 YearPicker, MonthPicker가 있을 수 있음)

https://velog.io/@yjyoo/vue-mixins-extends

[vue.js] mixins, extends