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

Question

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 차이에 대해서 첨언 좀 들을 수 있을까용?

멋진숲제비36 · Accepted Answer

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

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

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

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

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

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

선택은 본인이 해보세요!

풋풋한듀공128 · Answer

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

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

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

생활꿀팁

생활꿀팁

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