[Vue.js] 컴포지션(Composition) - mixins

 

◽ mixins이란

컴포넌트에 재사용 가능한 기능을 배포하는 유연한 방법이다.

컴포넌트에 mixin를 사용하면 해당 mixin의 모든 기능이 혼합된다.

<script>
	import myMixin from './js/mixin.js';
    
	export default {
    	// 이렇게 사용할 수 있다.
    	mixins: [myMixin],
    }
</script>

 

 

◽ mixins의 병합 규칙

mixins는 중복되는 옵션을 적절하게 병합한다.

 

data 옵션의 경우, mixin의 data 함수가 호출될 때 병합될 객체를 return 하여 병합된다.

만약 컴포넌트와 mixin에서 선언된 data의 변수 이름이 겹치는 경우, 컴포넌트의 변수가 우선권을 가진다.

const myMixin = {
  data() {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

const app = Vue.createApp({
  mixins: [myMixin],
  data() {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created() {
    console.log(this.$data) // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

 

같은 이름의 훅 함수는 모두 호출될 수 있게 배열에 병합된다.

믹스인 훅은 컴포넌트 자체의 훅이 호출되기 전에 호출된다.

const myMixin = {
  created() {
    console.log('mixin hook called')
  }
}

const app = Vue.createApp({
  mixins: [myMixin],
  created() {
    console.log('component hook called')
  }
})

// => "mixin hook called"
// => "component hook called"

 

methods, components, directives같은 객체 값을 요구하는 옵션은 같은 객체에 병합된다.

이러한 객체에 충돌하는 키가 있을 경우에는 컴포넌트의 옵션이 우선순위를 갖는다.

const myMixin = {
  methods: {
    foo() {
      console.log('foo')
    },
    conflicting() {
      console.log('from mixin')
    }
  }
}

const app = Vue.createApp({
  mixins: [myMixin],
  methods: {
    bar() {
      console.log('bar')
    },
    conflicting() {
      console.log('from self')
    }
  }
})

const vm = app.mount('#mixins-basic')

vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"

 

 

 

◽ 전역 mixin

전역으로 선언되기때문에 만약 컴포넌트 안에 호출되는 컴포넌트가 2개라면 총 3번이 호출되므로 주의한다.

vue에서는 전역선언이 필요하다면, 사용자 정의 옵션이 병합 될 때 기존 값을 덮어쓰는 방식 등으로 사용하는 것을 추천하고 있다.

const app = Vue.createApp({
  myOption: 'hello!'
})

// `myOption` 사용자 정의 옵션을 위한 핸들러 주입
app.mixin({
  created() {
    const myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

// `myOption`을 자식 컴포넌트에도 삽입
app.component('test-component', {
  myOption: 'hello from component!'
})

app.mount('#mixins-global')

// => "hello!"
// => "hello from component!"

 

 

 

출처

믹스인 | Vue.js

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.