Q. mixins property 와 extends property가 어떻게 다른 건가요?

test 2019. 01. 10. 

var CompA = { ... }
CompB = {  
  extends: CompA,
  ...
}
var mixin = {
  created: function () { console.log(1) }
}
var vm = new Vue({
  created: function () { console.log(2) },
  mixins: [mixin]
})

공식 문서에 보면, extends와 mixins 의 사용법이 위와 같이 기술되어 있습니다.
제가 해보니까 mixins랑 extends랑 전혀 다른 게 없는 것 같습니다.

merge logic도 동일한 것 같아요. 다른 개발자분들께서는 component를 확장해서 사용하고 싶을 때 어떤 property를 사용하시는지 궁금하네요.

extends와 mixins 차이에 대해서 첨언 좀 들을 수 있을까용?

#웹 #vue.js #vuejs #Vue #JavaScript
공유하고 보상받기 ♥︎
댓글 0

2개의 답변이 있습니다.

큐레이터 채택
비매스터 답변자인증
OpenSG 수석 컨설턴트 2019. 01. 11
100%의 채택

앞의분이 다중상속 단일상속 말씀은 하셨으니 제가 안해도 될듯 하네요 약간의 기능적 차이는 있어요

바로 동일 이벤트훅이 지정되었을 때의 호출 순서입니다 믹스인은 부모 믹스인이 호출되고 난후에 자식 컴포넌트의 이벤트훅이 호출됩니다만 extends는 그 반대입니다.

다음의 컨텐츠를 확인해보세요

https://alligator.io/vuejs/composing-components/

또 한가지는 mixin과 extends 중에서 어느것을 사용할까인데 전 개인적으로 mixin을 권장합니다. Mixin은 상속이라는 관점보다는 단순히 공통기능의 확장이라는 관점으로 바라봐야하지 않을까 생각합니다. 추가/확장해야할 기능이 여러개라면 자유롭게 추가할수 있어야 하는데 믹스인이 더적절해보입니다

예를들어 컴포넌트에 로깅과 인증/권한체크 기능이 둘다 필요하다면 어떨까요?

선택은 본인이 해보세요!

댓글 1
test 2019.04.03 03:31

이전에는 댓글 기능이 없어서 말씀 못드렸는데 몇달이 지난 후에도 상세한 답변에 두고두고 감탄하면서 보게 됩니다. 감사합니다.

jim 답변자인증
2019. 01. 11
0%의 채택

둘 다 비슷하다고 느끼셨기에 이러한 질문을 올리셨을 거라고 생각합니다. ^^

mixins는 다중 상속이 가능하고, extends는 단일 상속만 된다는 것이 가장 큰 차이점이에요.

하지만 mixins는 기존 서버개발에서도 안티패턴이므로 주의해서 사용하셔야 합니다.

댓글 0