Vue mixin All In One

vue 2.x

data 同名覆蓋， components 優先級高


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" }
  }
})

lifecycle hooks 同名共存，先執行 mixin, 后執行 components

var mixin = {
  created: function () {
    console.log('mixin hook called', 1);
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('component hook called', 2);
  }
})

// => "mixin hook called"
// => "component hook called"

methods 同名覆蓋， components 優先級高

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"

Note that the same merge strategies are used in Vue.extend().

Vue.mixin

global mixin

謹慎使用全局mixins，因為它會影響創建的每個Vue實例，包括第三方組件。

在大多數情況下，僅應將其用於自定義選項處理，如下例所示。


// inject a handler for `myOption` custom option
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})
// => "hello!"

最好將它們作為插件發布以避免重復應用。

https://vuejs.org/v2/guide/plugins.html

demo

https://www.vuemastery.com/courses/next-level-vue/mixins/

合並自定義選項時，它們將使用默認策略來覆蓋現有值。

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)
  }
}

https://github.com/vuejs/vuex

https://vuejs.org/v2/api/#optionMergeStrategies