Vue 混入 (mixins) 学习笔记

概念：

混入是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

混入的写法

1、全局混入

Vue.mixin({
   data(){
       return{
           num:1
       }
   }
})

2、

var mixin={
    data(){
        return {
            num:2
        }
    }
}
var vm=new Vue({
    mixins:[mixin],
    el:'#app',
    ...
})

选项合并：

1、数据对象会进行浅合并，在和组件的数据发生冲突时以组件数据优先

2、同名的钩子函数将混合为一个数组，因为将同时调用，混入对象的钩子将在组件自身钩子之前调用

3、值为对象的选项，比如 methods, components 和 directives，将被混合为同一个对象，两个对象键名冲突的，取组件对象的键值对。

自定义选项合并策略

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

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
  // return mergedVal
}

对于大多数对象选项，可以使用 methods 的合并策略：

var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods