vue3.0 믹싱

우선 공식 정의: 믹싱(mixin)은 Vue 구성 요소의 복용 가능한 기능을 나누어 주는 매우 유연한 방식을 제공한다.혼입 대상은 임의의 구성 요소 옵션을 포함할 수 있습니다.어셈블리에서 객체 믹싱을 사용하면 모든 객체 믹싱 옵션이 해당 어셈블리 자체의 옵션으로 블렌드됩니다.
통속적으로 말하면,mixin의 속성, 예를 들어 데이터,methods 또는 사용자 정의 속성은 모든 또는 지정된 구성 요소에 혼합되어, 이 구성 요소들이mixin에서 정의한 속성이나 이벤트를 호출할 수 있도록 한다

전역mixin

우선, 우리는 전체 국면의mixin을 직접 정의한다

//   mixin
app.mixin({
  message: 'mixin',
  data() {
    return {
      count: 100,
    };
  },
});

데이터 혼입

전역mixin은 기본적으로 모든 구성 요소에 섞여 있습니다. 다음에 구성 요소를 정의합니다. 템플릿에 삽입message 필드는 다음과 같습니다.

const app = Vue.createApp({
  template: `
    
{{message}}
  `,
}); 

이 때mixin의 데이터 속성은 구성 요소에 혼입됩니다. 구성 요소의 데이터에 메시지 필드가 포함되어 있지 않지만, 실행 중인 페이지에 메시지 값이 표시됩니다. mixin message현재, 구성 요소 내부의 데이터에도 메시지 필드를 추가합니다.

const app = Vue.createApp({
  data() {
    return {
      message:'app message'
    }
  }
  ...
}); 

이 때 페이지를 실행하면 템플릿의 내용은 구성 요소의 데이터 값app message을 표시합니다. 이것은 구성 요소 내부 데이터의 우선순위가mixin 내부 데이터의 우선순위보다 높다는 것을 의미합니다.

이벤트 섞기

마찬가지로 우리도 이벤트의 우선순위를 테스트할 수 있다

const app = Vue.createApp({
  ...
  methods: {
    handleClick() {
      console.log('app click');
    }
  },
  //  ，  "app click"
  template: "
{{message}}
"
}); 
//   mixin
app.mixin({
  ...
  methods: {
    handleClick() {
      console.log('mixin click');
    }
  }
});

div를 누르면 app click 인쇄됩니다. 이것은 믹스와 구성 요소에 모두handleClick 이벤트가 존재할 때 구성 요소에 같은 이름의 이벤트 우선 순위가 비교적 높다는 것을 의미합니다.

주기 함수 섞기(created, mounted 등)

다음은mixin과 app에서 동시에 정의created 함수

const app = Vue.createApp({
  ...
  created() {
    console.log("app created");
  }
}); 
//   mixin
app.mixin({
  created() {
  ...
    console.log("mixin created");
  }
});

이 페이지를 실행하면 프린터가 출력됩니다

mixin created
app created

즉,mixin의 생명주기 갈고리 함수와 app 구성 요소의 갈고리 함수가 모두 실행되고,mixin이 우선적으로 실행된다는 것이다.

사용자 정의 속성 혼입

mixin과 app 구성 요소에서 속성을 직접 정의할 수 있습니다.사용자 정의 속성은 템플릿에서 $options[prop] 방식으로 호출해야 합니다

const app = Vue.createApp({
  message: "app message",
  template: "
{{$options.message}}
"
}); 
//   mixin
app.mixin({
  message: "mixin message"
});

페이지를 실행하면 템플릿은 app 구성 요소의 메시지 값 app message 을 보여 줍니다. 사용자 정의 속성도 구성 요소가mixin보다 우선순위가 높습니다.

사용자 정의 속성 병합 정책 수정

만약mixin의 우선순위가 구성 요소의 우선순위보다 높게 하려면 아래 코드를 통해 수정할 수 있습니다

app.config.optionMergeStrategies.message = (mixinVal, appVal) => {
  return mixinVal || appVal;
};

합병 정책 방법에서 두 개의 매개 변수를 받아들인다. 첫 번째 매개 변수는mixin 사용자 정의 속성 값이고 두 번째 매개 변수는 app 구성 요소의 사용자 정의 속성 값이다. 사용자는 방법 판단을 통해 어느 값을 되돌려 사용자 정의 속성의 우선순위를 정의할 수 있다.
위 코드는 MixinVal에 값이 있으면 MixinValue를 되돌려주고 그렇지 않으면 appVal을 되돌려주기 때문에 템플릿에 표시되는 것은 당연한 것입니다 mixin message.

로컬 어셈블리

부분 구성 요소의 정의는 구성 요소에 명시적으로 명시해야 합니다.

// 1.  
const MyMixin = {
  data() {
    return {
    };
  },
  created() {
    console.log('mixin created');
  },
  methods: {
    handleClick() {
    },
  },
};
// 2.  mixins 
const app = Vue.createApp({
  mixins: [myMixin]
})

mixins 속성을 통해 주입해야 하는 것 외에 전역 구성 요소와 차이가 없기 때문에 따로 설명하지 않습니다.

허물

mixin은 일부 구성 요소를 다시 사용할 수 있는 블록으로 추출할 수 있지만, 그도 피할 수 없는 문제가 있다.

mixin은 충돌이 발생하기 쉬워서 어떤 값이 도대체 mixin인지 app에서 왔는지 분명하지 않을 것이다.

중용성이 제한되어 전달 파라미터를 통해mixin의 논리를 수정할 수 없어 추상적 논리의 유연성을 떨어뜨린다.

총결산

이 문장에서 우리는 다음과 같은 몇 가지를 말했다.

mixin의 개념 및 정의

데이터,methods,생명주기 함수 혼합

사용자 정의 속성을 혼입하고 사용자 정의 속성을 수정하는 혼합 정책

전역mixin 및 국부mixin 정의 방식

mixin의 결함