Summarize some knowledge points of vue3: Vue.js mixed in

Vue.js mixins

Mixins define a reusable set of methods or computed properties. Mixins can contain arbitrary component options. When a component uses a mixin, all the options of the mixin will be mixed into the options of the component itself.

Let's look at a simple example:

example

var vm = new Vue({
    el: '#databinding',
    data: {
    },
    methods : {
    },
});
// 定义一个混入对象
var myMixin = {
    created: function () {
        this.startmixin()
    },
    methods: {
        startmixin: function () {
            document.write("欢迎来到混入实例");
        }
    }
};
var Component = Vue.extend({
    mixins: [myMixin]
})
var component = new Component();

---

option merge

When components and mixins contain options with the same name, those options will be mixed in appropriately.

For example, data objects will be shallowly merged internally (one layer of attribute depth), and when there is a conflict with component data, the component data will take precedence.

In the following example, the Vue instance contains the same methods as the mixin object. It can be seen from the output that the two options are merged.

example

var mixin = {
    created: function () {
        document.write('混入调用' + '<br>')
    }
}
new Vue({
    mixins: [mixin],
        created: function () {
        document.write('组件调用' + '<br>')
    }
});

The output is:

混入调用
组件调用

If the methods option has the same function name, the Vue instance will take precedence. In the following example, both the Vue instance and the methods option of the mixed-in object contain the same function:

example

var mixin = {
    methods: {
        hellworld: function () {
            document.write('HelloWorld 方法' + '<br>');
        },
        samemethod: function () {
            document.write('Mixin：相同方法名' + '<br>');
        }
    }
};
var vm = new Vue({
    mixins: [mixin],
    methods: {
        start: function () {
            document.write('start 方法' + '<br>');
        },
        samemethod: function () {
            document.write('Main：相同方法名' + '<br>');
        }
    }
});
vm.hellworld();
vm.start();
vm.samemethod();

The output is:

HelloWorld 方法
start 方法
Main：相同方法名

In the above example, we called the following three methods:

vm.hellworld();
vm.start();
vm.samemethod();

From the output result methods option, if the same function name is encountered, the Vue instance has a higher priority and will execute the output.

---

global mixins

It is also possible to register mixins globally. Pay attention to use! Once the global mixin object is used, it will affect all Vue instances created afterwards. When used appropriately, custom objects can be injected with processing logic.

example

// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})
 
new Vue({
  myOption: 'hello!'
})
// => "hello!"

Use global mixins sparingly, as it will affect every individually created Vue instance (including third-party templates).