A brief analysis of the implementation of mixin in Vue

Mixin provides a very flexible way to distribute reusable features in Vue components. A blended object can contain any component options. When a component uses a blended object, all options for blended objects will be "mixed" into the options of the component itself.

// Define a mixed objectvar myMixin = {
  created: function () {
    ()
  },
  methods: {
    hello: function () {
      ('hello from mixin!')
    }
  }
}
 
// Define a component that uses mixed objectsvar Component = ({
  mixins: [myMixin]
})
 
var component = new Component() // => "hello from mixin!"

Option merge

When components and blended objects contain options with the same name, these options are "merged" in the appropriate way.

For example, data objects will be recursively merged internally, and component data will be preferred when conflict occurs.

var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}
 
new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    (this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

The hook functions with the same name will be merged into an array, so they will all be called. Additionally, the hooks that are mixed into the object will be called before the component itself hooks.

var mixin = {
  created: function () {
    ('The hook that mixes into the object is called')
  }
}
 
new Vue({
  mixins: [mixin],
  created: function () {
    ('Component hook is called')
  }
})
 
// => "The hook mixed into the object is called"// => "Component hook is called"

Options with values ​​of objects, such as methods, components, and directives, will be merged into the same object. When the key names of two objects conflict, take the key-value pair of the component object.

var mixin = {
  methods: {
    foo: function () {
      ('foo')
    },
    conflicting: function () {
      ('from mixin')
    }
  }
}
 
var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      ('bar')
    },
    conflicting: function () {
      ('from self')
    }
  }
})
 
() // => "foo"
() // => "bar"
() // => "from self"

Note: () also uses the same strategy for merge.

Global mixing

Mixed in can also be used for global registration. Be extra careful when using it! Once global mix-in is used, it will affect each Vue instance created later. This can be used to inject processing logic into custom options when used.

// Inject a processor for the custom option 'myOption'.({
  created: function () {
    var myOption = this.$
    if (myOption) {
      (myOption)
    }
  }
})
 
new Vue({
  myOption: 'hello!'
})
// => "hello!"

Use global mix-in with caution, as it affects each individually created Vue instance (including third-party components). Most of the time, it should only be applied to custom options, like the example above. It is recommended to publish it as a plugin to avoid repeated app mixing.

Custom Options Merge Policy

Custom options will use the default policy, which simply overwrites the existing values. If you want custom options to merge with custom logic, you can add a function to:

 = function (toVal, fromVal) {
  // Return the combined value}

For options with most values ​​as objects, you can use the same merge strategy as methods:

var strategies = 
 = 

A more advanced example can be found in Vuex's mix-in strategy:

const merge = 
 = function (toVal, fromVal) {
  if (!toVal) return fromVal
  if (!fromVal) return toVal
  return {
    getters: merge(, ),
    state: merge(, ),
    actions: merge(, )
  }
}

This is the end of this article about a brief analysis of the implementation of mixin in Vue. For more related mixin content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!