VueJS mixin 과 extends 차이

Updated:
Categories: Web
Tags: #JavaScript #Vue

VueJS mixin 과 extends 차이

동일 이벤트훅이 지정되었을 때의 호출 순서

다중 상속 가능 여부

  • mixin는 다중 상속이 가능(array로 컴포넌트를 연결)하고,
  • extends는 단일 상속만 됨(extends 프로퍼티에 컴포넌트가 객체로 들어감).

LifeCycle hook 외 옵션 병합

정의된 LifeCycle hook 모두 호출되는 것과 달리 methods, components, directives는 오버라이딩 된다. 즉 확장된 컴포넌트에서 동일한 이름으로 함수를 재정의하면 재정의된 함수를 사용한다. mixin하는 여러 컴포넌트에서 동일한 함수가 있는 경우, 배열 순서 상 나중에 등록된 컴포넌트의 함수를 호출한다.

느낀점

  • mixin은 컴포넌트 간 공통 기능의 관리 측면에서 접근하는게 좋을 것 같음. 예전 자바스크립트 코드에서 기능 단위별로 모듈화하여 개발했던 것과 비슷한 것 같음.
  • extends는 베이스 컴포넌트가 있는 상태에서 이를 확장할 때 사용. 상속으로 개념을 표현할 수는 있음. (예. 날짜를 선택할 수 있는 DatePicker 의 자식들에는 YearPicker, MonthPicker가 있다.)
    • 자바스크립트에서는 type-safe 에 대한 개념이 강하지 않아(+ Vue는 UI 컴포넌트 단위) 코드 상에서의 이득은 잘 모르겠음.
    • 자바와 같은 경우 특정 객체를 상속한 객체 타입만 받는다던지 등과 같은 표현이 가능.

두 개념이 기능상 큰 차이가 없지만 상속 개념을 표현할 것이 아니면 다중 상속이 가능한 mixin이 더 유연한 코드가 되지 않을까 싶음.

참고

Comments