浅谈一下Vue.config.optionMergeStrategies 的自定义选项合并策略

目标

• 什么是Vue自定义选项合并策略？
• 如何使用？

要点

什么是Vue自定义选项合并策略

optionMergeStrategies 主要用于 mixin 以及 Vue.extend() 方法时对于子组件和父组件如果有相同的属性(option)时的合并策略

自定义选项将使用默认策略，即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并，可以向 Vue.config.optionMergeStrategies 添加一个函数：

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) { 
    // 返回合并后的值 
}

说的太笼统了，我怎么看不懂呢😥😪🧐

我们先来看看Vue.config.optionMergeStrategies 是个什么玩意

是不是一目了然，就是Vue实例的所有方法，既然知道了，那接下来我们自己玩一下 🏃‍♂️🏃‍♂️🏃‍♂️

// 我先去接收一下optionMergeStrategies
const myOptionMergeStrategies = Vue.config.optionMergeStrategies
// 使用created这个生命周期函数作为我要合并的对象，并定义了一个 notInCurrentWindow 方法
myOptionMergeStrategies.notInCurrentWindow = myOptionMergeStrategies.created

// 自定义一个方法
const fn = (name, vm) => {
const lifeCycles = vm.$options[name]
    if (lifeCycles && lifeCycles.length) {
        lifeCycles.forEach(lc => lc.call(vm));
    }
    
    // 子组件同样可以使用当前的自定义选项合并
    const children = vm.$children
    if (children && children.length) {
            children.forEach(child => fn(name, child))
    }
}

const bind = vm => {
    // 监听一下window窗口的进入和离开事件
    window.addEventListener('visibilitychange', () => {
        if (document.visibilityState === 'hidden') {
            fn('notInCurrentWindow', vm)
        }
    })
}

const vm = new Vue({
    el: document.querySelector('#root'),
    template: `
        <h1>hello world !</h1>
    `,
    notInCurrentWindow() {
        // todo
        alert('notInCurrentWindow 离开当前页面')
    },
    created() {
        // todo
        alert('created 离开当前页面')
    },
})

// 把自定义选项合并注入到Vue实例
bind(vm)

执行一下看看效果

总结：自定义合并策略本质就是继承了Vue内置的这些api的同时，扩展了自定义的用法 🤙🤙🤙

官方建议：

请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。推荐将其作为插件发布，以避免重复应用混入。