Vue extends, mixin의 "자세한" 차이

1. 오해

• mixin과 extend는 둘다 같은 병합전략 사용 (부모 > 자식)
• mixin은 "다중상속" 가능 하지만 style, template 못가져옴 ( 기능적인 부분 분리 )
• extends는 "하나만" 상속 가능 하지만 style, template 가져올수 있다. ( 기능 + ui or ui 분리 )

 

2. 삽질 오지게한 결과 알아낸 것들

 

1. extend를 사용했을 경우 mounted, created, destoryed 등의 lifecycle은 "통합" 된다. 즉 가져오는 com과 사용하는 com 둘다 설정했을때 2번 실행됨
2. 그 외 name, method들은 통합이 안된다!!
3. 당연한 얘기겠지만 extend를 사용했을경우 template는 통합 안됨 "ui적인 부분"(style)을 분리하기 위해 따로 뺏을경우 가져오는 com에서 작성한 "class명과" extend한 com의 "class명"을 동일하게 해야되고 template는 그에맞춰서 따로 작성한다. ( style은 extend 한 com, 가져오는 com 둘다 만들어도 통합 된다 )

처음엔 extends를 자세히 몰라서 mixin을 한다음 style도 따로 빼서 직접 import 시킨다음 가져왔었는데 구조도 엉망이고 불편했다.

이후 필자는 아직까지 디자인 시안에 기능적인 부분의 분리가 없기에 slider, select-box component를 extend 한다음

style은 동일한 class명에 하나 더 추가해서 따로 주고 template는 그에맞춰 다시 만들거나 재사용할수있는건 재사용했다.