티스토리 뷰

Vue.JS

[Vue.JS] Mixins

버미노트 2019. 2. 5. 00:23

1. 기초

Minxins는 컴포넌트에 재사용 가능한 기능을 배포하는 방법입니다. mixins 객체는 컴포넌트의 옵션에 정의됩니다. mixins를 사용하면 해당 mixin의 모든 옵션과 컴포넌트의 옵션들이 'Mixed' 됩니다.

// define a mixin object
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// define a component that uses this mixin
var Component = Vue.extend({
  mixins: [myMixin]
})

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

2. 옵션 병합

mixin과 컴포넌트의 옵션이 중첩이 된다면, 두 옵션은 'Merged' 됩니다.

data

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" }
  }
})

data 객체는 재귀적 병합을 하며, mixin과 컴포넌트의 data가 충돌 될 경우, 컴포넌트의 data가 우선 순위를 갖습니다.

라이프 사이클 훅

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"

동일한 이름을 가진 라이프 사이클 훅 함수는 배열로 합쳐져 모두 호출됩니다. mixin의 훅 함수가 먼저 호출 되고, 그 후 컴포넌트의 훅 함수가 호출 됩니다.

methods, components, directives

methodscomponents, directives 옵션들은 하나의 객체로 머지 됩니다. mixin와 컴포넌트의 옵션이 충돌 된다면 컴포넌트의 옵션이 더 높은 우선순위를 가집니다.

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"

3. 전역 Mixin

mixin을 global 하도록 정의할 수 있습니다. mixin을 global로 정의하면, 모든 Vue 인스턴스에 mixin이 적용되어 영향을 미치기 때문에, 주의해서 사용해야 합니다.

// inject a handler for `myOption` custom option
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

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

위의 코드와 같이 전역 Mixin은 사용자 정의 옵션을 처리하는데 유용하게 사용 될 수 있습니다. 전역 Mixin은 모든 Vue 인스턴스에 영향을 주기 때문에 신중하게 사용되어야 합니다. 위의 예제와 같이 사용자 지정 옵션 처리에만 사용하는 것이 좋습니다. 중복 적용을 피하기 위해 앞으로 이야기 할 Plugins을 사용하는 것도 좋은 방법입니다.

4. 사용자 정의 옵션 병합 전략

사용자 지정 옵션을 병합하면, 기본값으로 기존 값을 덮어 쓰게 됩니다.

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
  // return mergedVal
}

위의 코드와 같이 Vue.config.optionMergeStrategies를 사용하면, 사용자 정의에 따라 병합됩니다.

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

위의 코드와 같이 대부분의 경우 object-based 옵션은, methods를 사용하여 전략을 간당하게 적용할 수 있습니다.

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)
  }
}

위의 예제 코드는 Vuex의 1.x 버전의 병합 전략을 나타낸 예제입니다.

참고

댓글
공지사항
최근에 올라온 글