[Vue.js] mixin 코드 스타일 가이드

Vue mixin 사용 시 추천하는 코드 스타일

📌 mixin 사용 시 코드 스타일이 중요한 이유?

회사에서 기존 소스코드를 분석하며 가장 힘들었던 부분은 mixin 사용과 관련된 것이었습니다.

별다른 코드 컨벤션 없이 mixin 을 사용하면 대규모 서비스에서

해당 소스가 어느 모듈에 포함된 것인지 파악이 힘들게 됩니다.

이에 어떻게 하면 코드 분석이 용이한 방법으로 mixin 을 사용할 수 있을지 고민이 필요했습니다.

 

📌 Vue 스타일 가이드에서 제시하는 방법

const myAwesomeMixin = {
    methods: {
        $_myAwsomeMixin_update: function () { /** ... */ }
    }
}

Vue 스타일 가이드 에서는 위와 같이 mixin 의 사용자정의 프로퍼티는

$_ 라는 접두사를 이용하는 것을 추천합니다.

_ 접두사는 사용하면 안될까?

Vue 에서는 이미 private 속성을 위해 _ 접두사를 사용하고 있습니다.
따라서 _update 와 같이 정의할 경우 기존에 있는 속성과 충돌할 수 있으며

운 좋게 지금은 충돌하지 않더라도 나중에 버전이 업데이트 되며 새롭게 추가되거나

변경된 속성들과 충돌이 발생할 가능성이 있습니다.

 

그러므로 $_ 접두사 사용을 추천합니다.

 

📌 참고자료

What does the dollar prefix ($) mean in Vue.js?

Style Guide - Vue.js