Vue.config.optionMergeStrategies の使用状況分析

Vue.config.optionMergeStrategies はマージ戦略を定義します。

実際、これは vue の mixins 属性です。他の Vue のインスタンスである配列 [components] を受け取ります。

次のように書いたとします。

Vue.config.optionMergeStrategies.name = function (toVal, fromVal, vm) {     return fromVal || toVal }

その後、コンポーネントがマージされると、このルールに従います。端的に言えば、それは2つのオブジェクトの結合です

vm は、現在のマージされたコンポーネントのコンテキストです。

main.ts

import { createApp } from 'vue'
import App from './App.vue'

const myMixin = {
  custom: "mix custom",
  created() {
      console.log('mix')
  }
}

const app = createApp(App)

app.config.optionMergeStrategies.custom = (toVal, fromVal, vm) => {
  console.log(toVal, fromVal)
  console.log(vm)
  return fromVal || toVal
}

app.mixin(myMixin)

app.mount('#app')

コンポーネント App.vue

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'App',
  custom: "app custom",
  created() {
    console.log(this.$options.custom)
  }
})
</script>

Vue はフック関数を Array<hook> に結合するため、作成されたそれぞれの関数が呼び出されます。 

Vue のすべてのオプションには独自のマージ戦略があり、興味のある学生はそのソース コードを読むことができます。