Vue.js
Vue.js
Source
Edit
History

믹스인

카탈로그
  1. 1. 기초
  2. 2. 옵션 병합
  3. 3. 전역 Mixin

기초

Mixins는 Vue 컴포넌트에 재사용 가능한 기능을 배포하는 유연한 방법입니다. mixin 객체는 모든 구성 요소 옵션을 포함할 수 있습니다. 컴포넌트에 mixin을 사용하면 해당 mixin의 모든 옵션이 컴포넌트의 고유 옵션에 “혼합”됩니다.

Watch a video explanation on Vue Mastery
Example: 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// mixin 객체 생성
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// mixin을 사용할 컴포넌트 정의
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

옵션 병합

mixin과 컴포넌트 자체에 중첩 옵션이 포함되어 있으면 적절한 전략을 사용하여 “병합”됩니다.

For example, data objects undergo a recursive merge, with the component’s data taking priority in cases of conflicts.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

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

같은 이름의 훅 함수가 배열에 병합되어 모든 함수가 호출됩니다. 또한 mixin 훅은 컴포넌트 자체의 훅 이전에 호출됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var mixin = {
  created: function () {
    console.log('mixin hook called')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('component hook called')
  }
})

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

methods,components,directives와 같은 객체 값을 요구하는 옵션은 같은 객체에 병합됩니다. 이러한 객체에 충돌하는 키가 있을 경우 컴포넌트의 옵션이 우선순위를 갖습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})

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

같은 병합 전략이 Vue.extend()에서 사용된다는 것에 주의하십시오.

전역 Mixin

mixin은 전역으로 적용할 수 있습니다. 주의하세요! mixin을 전역으로 적용하면 이후에 생성된 모든 Vue 인스턴스 에 영향을 미칩니다. 적절히 사용하면 사용자 정의 옵션에 대한 처리 로직을 주입하는 데 사용할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// `myOption` 사용자 정의 옵션을 위한 핸들러 주입
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})
// => "hello!"

글로벌 mixin은 써드파티 컴포넌트를 포함하여 생성된 모든 단일 Vue 인스턴스에 영향을 주기 때문에 적게 이용하고 신중하게 사용하십시오. 대부분의 경우 위 예제에서와 같이 사용자 지정 옵션 처리에만 사용해야합니다. 중복 적용을 피하기 위해 [Plugins](plugins.html)로 제공하는 것도 좋은 생각입니다.

## 사용자 정의 옵션 병합 전략

사용자 지정 옵션을 병합할 때 기본 옵션을 사용하면 기존 값을 덮어씁니다. 커스텀 로직을 사용해 커스텀 옵션을 병합하려면,Vue.config.optionMergeStrategies에 함수를 추가할 필요가 있습니다.

1
2
3
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
  // return 병합된 값
}

대부분의 객체 기반 옵션에서 methods에서 사용한 것과 같은 전략을 간단하게 사용할 수 있습니다 :

1
2
var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods

더 고급 예제는 Vuex의 1.x 병합 전략에서 확인하실 수 있습니다.

1
2
3
4
5
6
7
8
9
10
const merge = Vue.config.optionMergeStrategies.computed
Vue.config.optionMergeStrategies.vuex = function (toVal, fromVal) {
  if (!toVal) return fromVal
  if (!fromVal) return toVal
  return {
    getters: merge(toVal.getters, fromVal.getters),
    state: merge(toVal.state, fromVal.state),
    actions: merge(toVal.actions, fromVal.actions)
  }
}