Vue.config.optionMergeStrategies 用法分析

Vue.config.optionMergeStrategies 是定义一个合并的策略

其实就是vue的  mixins属性。接收一个数组[ components ]，数组里是其他vue的实例。

比如你写了这个：

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

那么 componets 合并进来的时候  就会遵循这个规则。 说白了就是两个对象的合并

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>

我们会发现 created 并不会被覆盖，vue 把 hook 函数合并都打包成了一个 Array<hook> ，所以每个 created 都会被调用。 

vue自身所有的option都有自己的合并策略，有兴趣的同学可以去读一读它的源码！