티스토리 뷰
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
methods
와 components
, 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 버전의 병합 전략을 나타낸 예제입니다.
참고
'Vue.JS' 카테고리의 다른 글
[Vue.JS] Render Functions & JSX (0) | 2019.02.14 |
---|---|
[Vue.JS] 사용자 정의 디렉티브 (1) | 2019.02.07 |
[Vue.JS] 컴포넌트 (고급:Handling Edge Cases) (0) | 2019.02.02 |
[Vue.JS] 컴포넌트 (고급:Dynamic & Async Components) (0) | 2019.01.29 |
[Vue.JS] 컴포넌트 (고급:slot) (0) | 2019.01.26 |