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

Answer 1

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

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

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

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

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

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

선택은 본인이 해보세요!

Answer 2

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

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

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