VueJS mixin anti-pattern

mixin 이라고 들어보셨나?

 

한마디로 object를 병합합니다. 병합하는데 우선순위가 있고... 

머 공통화 하는데 조금 편할수는 있겠지..

 

그런데 global mixin을 많이 쓰면..... 난감하다.

일단 명시적이지 않고, 컨텐스트를 자꾸 옮겨 다녀야 한다. 

그리고 이놈이 이 컴포넌트에서 쓰는지 global로 선언되서 쓰는건지...

이런거 햇갈리니 함수에 prefix를 붙인다.. ㄷㄷ

 

Vue3에서도 mixin은 있지만 가능하면 composition을 통해서 해결 하는 형태를 추천 하고 있다.

아닌거 같다고? 

 

 

Drawbacks

In Vue 2, mixins were the primary tool to abstract parts of component logic into reusable chunks. However, they have a few issues:

• Mixins are conflict-prone: Since properties from each mixin are merged into the same component, you still have to know about every other mixin to avoid property name conflicts.
• Properties seem to appear from nowhere: If a component uses multiple mixins it isn't necessarily obvious which properties came from which mixin.
• Reusability is limited: we cannot pass any parameters to the mixin to change its logic, which reduces their flexibility in terms of abstracting logic.

To address these issues, we added a new way to organize code by logical concerns: the Composition API.

 

https://v3.vuejs.org/guide/mixins.html#drawbacks

Mixins | Vue.js