Vue学习—选项(三) mixins混入

1.  mixins：mixins 选项接受一个混入对象的数组。这些混入实例对象可以像正常的实例对象一样包含选项，他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。举例：如果你的混入包含一个钩子而创建组件本身也有一个，两个函数将被调用。Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。也就是说同一个生命周期钩子写在构造器外部的会比构造器里面的先调用，如下例子结果如图：
   < body>

   < h1>mixins混入</ h1>

   < div id= "app">

   {{message}}

   </ div>

   < script>

   var abc = {

   created: function () {

   console. log( "我被混入了！");

   }

   };

   var app = new Vue({

   el: "#app",

   data: {

   message: "Hello Vue!"

   },

   created: function () {

   console. log( "我在构造器里面——我被混入了！");

   },

   mixins: [abc]

   })

   </ script>

   </ body>
2. 混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。当选项合并时：

   当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合。比如，数据对象在内部会进行浅合并 (一层属性深度)，在和组件的数据发生冲突时以组件数据优先。

   var mixin = {

   data: function () {

     return {

        message: 'hello',

        foo: 'abc'

     }

    }

   }

   new Vue({

      mixins: [mixin],

      data: function () {

      return {

        message: 'goodbye',

        bar: 'def'

      }

   },

      created: function () {

        console. log( this.$data)

        // => { message: "goodbye", foo: "abc", bar: "def" }

      }

   })

   同名钩子函数将混合为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

   var mixin = {

       created: function () {

         console. log( '混入对象的钩子被调用')

       }

   }

   new Vue({

       mixins: [mixin],

       created: function () {

        console. log( '组件钩子被调用')

       }

   })

   // => "混入对象的钩子被调用"

   // => "组件钩子被调用"

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

   var mixin = {

       methods: {

       foo: function () {

         console. log( 'foo')

       },

       conflicting: function () {

         console. log( 'from mixin')

       }

     }

   }

   var vm = new Vue({

       mixins: [mixin],

       methods: {

       bar: function () {

         console. log( 'bar')

       },

       conflicting: function () {

         console. log( 'from self')

       }

     }

   })

   vm. foo() // => "foo"

   vm. bar() // => "bar"

   vm. conflicting() // => "from self"

   注意：Vue.extend() 也使用同样的策略进行合并。

3. 全局混入：也可以全局注册混入对象。注意使用！ 一旦使用全局混入对象，将会影响到 所有 之后创建的 Vue 实例。使用恰当时，可以为自定义对象注入处理逻辑。必须谨慎使用全局混入对象，因为会影响到每个单独创建的 Vue 实例 (包括第三方模板)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。也可以将其用作 Plugins 以避免产生重复应用。一般在用户名的验证等场景中会使用到全局混入

   < body>

   < h1>mixins混入</ h1>

   < div id= "app">

   {{message}}

   < p>

   < button @ click= "add">+</ button>

   </ p>

   </ div>

   < script>

   Vue. mixin({

   created: function () {

   console. log( "我是全局被混入的！")

   }

   })

   var abc = {

   methods: {

   add: function () {

   console. log( "我被加了");

   }

   },

   created: function () {

   console. log( "我在构造器外面——被混入的！")

   }

   };

   var app = new Vue({

   el: "#app",

   data: {

   message: "Hello Vue!"

   },

   created: function () {

   console. log( "我在构造器里面——被混入的！")

   },

   methods: {

   add: function () {

   console. log( "我在构造器里面——我被加了");

   }

   },

   mixins: [abc]

   })

   </ script>

   </ body>

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

   Vue.config.optionMergeStrategies. myOption = function ( toVal, fromVal) {

   // return mergedVal

   }

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

   var strategies = Vue.config.optionMergeStrategies

   strategies.myOption = strategies.methods
   更多高级的例子可以在 Vuex 的 1.x 混入策略里找到：
   const merge = Vue.config.optionMergeStrategies.computed

   Vue.config.optionMergeStrategies. vuex = function ( toVal, fromVal) {

   if ( !toVal) return fromVal

   if ( !fromVal) return toVal

   return {

   getters: merge(toVal.getters, fromVal.getters),

   state: merge(toVal.state, fromVal.state),

   actions: merge(toVal.actions, fromVal.actions)

   }

   }