mixins vs composable

Vue.js는 사용자 정의 구성 요소를 작성하고 관리할 수 있는 유연한 프레임워크입니다. Vue 2의 mixins와 Vue 3의 composable은 코드 재사용성을 높이기 위해 사용되지만, 접근 방식과 기능에서 차이점이 있습니다. 다음은 이 두 가지 개념의 공통점과 차이점을 비교한 것입니다.

공통점

1. 재사용성: 둘 다 코드의 재사용성을 높여줍니다. 특정 기능이나 로직을 여러 컴포넌트에서 쉽게 공유할 수 있도록 합니다.
2. 구조화된 코드: 중복된 코드를 제거하고, 코드베이스를 더 구조화되고 유지보수하기 쉽게 만듭니다.
3. 컴포넌트 간의 논리 공유: 여러 컴포넌트 간에 공통적인 로직을 공유하는 데 사용됩니다.

차이점

Vue 2 Mixins

1. 개념: mixins는 Vue 2에서 여러 컴포넌트 간에 로직을 공유하기 위해 사용되는 객체입니다.

2. 사용법: mixins 객체는 컴포넌트의 mixins 속성에 추가되어 사용됩니다.

   const myMixin = {
     created() {
       console.log('Mixin hook called');
     },
     methods: {
       sharedMethod() {
         console.log('Shared method');
       }
     }
   }
   
   export default {
     mixins: [myMixin],
     created() {
       console.log('Component hook called');
     }
   }
   

3. 충돌 문제: mixins에서 정의된 속성이나 메소드가 컴포넌트 내의 다른 속성이나 메소드와 충돌할 수 있으며, 이런 경우 해결이 어렵습니다.

4. 네임스페이스 없음: mixins의 메소드와 데이터는 컴포넌트의 스코프와 병합되므로, 네임스페이스 충돌이 발생할 수 있습니다.

5. 여러 믹스인을 섞어서 쓸 경우 특정 로직이 어디서 발생하는지 추적이 어려울 수 있음

Vue 3 Composable

1. 개념: composable은 Vue 3의 Composition API를 사용하여 상태 및 로직을 재사용 가능한 함수로 분리하는 방법입니다.

2. 사용법: composable 함수는 setup 함수 내에서 호출되어 사용됩니다.

   // useMyComposable.js
   import { ref, onMounted } from 'vue';
   
   export function useMyComposable() {
     const myData = ref(null);
   
     onMounted(() => {
       myData.value = 'Hello from composable!';
     });
   
     const sharedMethod = () => {
       console.log('Shared method');
     }
   
     return {
       myData,
       sharedMethod
     }
   }
   
   // Component.vue
   import { useMyComposable } from './useMyComposable';
   
   export default {
     setup() {
       const { myData, sharedMethod } = useMyComposable();
   
       return {
         myData,
         sharedMethod
       }
     }
   }
   

3. 명확한 스코프: composable은 명확한 스코프를 가지며, 함수 내에서 반환된 것만 노출됩니다. 따라서, 네임스페이스 충돌의 위험이 적습니다.

4. 유연성: Composition API를 사용하여 더 유연하게 로직을 구성할 수 있습니다. hooks나 React의 함수형 컴포넌트와 비슷한 패턴을 따릅니다.

결론

• mixins는 Vue 2에서 코드 재사용을 위해 사용되며, 기존 컴포넌트에 쉽게 추가할 수 있는 장점이 있지만, 스코프 충돌 문제와 같은 단점이 있습니다.
• composable은 Vue 3의 Composition API를 사용하여 코드 재사용성을 극대화하며, 더 명확한 스코프와 유연성을 제공합니다.

Vue 3로 업그레이드할 경우, composable 패턴을 사용하는 것이 더 권장되며, 기존 mixins 패턴에서 composable로 전환하면 유지보수성과 확장성이 향상될 수 있습니다.