Mixins

Mixins

여러 컴포넌트 간에 공통으로 사용하고 있는 로직, 기능들을 재사용하는 방법
믹스인에 정의할 수 있는 로직은 data, methods, created 등과 같은 컴포넌트 옵션들

mixins 장점

1. 공통된 로직을 모아서 재사용하기에 컴포넌트 코드가 간결해진다
2. 부차적인 요소들(spinner, modal) mixins 사용시 효율이 좋음
3. 컴포넌트에는 crud와 관련된 비즈니스 로직들만 남게됨

HOC vs Mixcins

HOC와 Mixins 목적 모두 컴포넌트에 들어가는 특정 로직들을 재사용하기 위해서 사용함

// mixins.js
export default {
  // 재사용할 컴포넌트 옵션 & 로직
}

// component.vue
import mixins from '';

export default {
  mixins: [mixins], 
}



// HOC
export default function withHOC() {
  return {
 	 // 재사용할 컴포넌트 옵션
    ...
    render(createElement){
      return createElement(component);
    }
  }
}

단점

mixins을 여러개를 주입했을 때때 특정 코드가 어느 믹스인에서 주입된건지 확인하기 어렵다