Day 29 - 用Mixins来共用方法

相信经过了前面二十几天的洗礼，小夥伴们应该都对Vue有了一定的掌握度了吧~
今天要来提到的是Vue的Mixins。

甚麽是Mixins?

Mixin 是一种让元件之间彼此共用方法的方法，可以将常使用的方法独立抽出放在mixins，避免重复出现。
使用Mixin，可以让所有 component 的选项都可以拿来使用 (created, computed…)，当 component 使用 mixin 时，mixin 本身的选项都会和 component 自己的选项混合在一起。
虽然Mixins在Vue3中被composition api取代，不过我们这里还是继续来看一下。
例如下面的例子中，我们定义了一个mixin物件，并在component中进行使用。

var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

原始码:
https://codepen.io/adjwcmzg/pen/WNEQOdx

选项合并 Option Merging

不过，既然是混入原本不属於元件的方法，就有可能会与原本的元件方法产生冲突。
当元件和mixin对象含有同名选项时，这些选项将会进行合并，并在发生冲突时以元件数据优先。

如果是hook的话(Created, etc.)，将会被合并成一个阵列，所以不管是元件的还是mixins的，都会被执行，不过mixins的会早於元件本身。

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

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

原始码:
https://codepen.io/adjwcmzg/pen/jOLbwKy

不过如果是Methods, Components and Directives话，有冲突时会无条件选用元件的 option。

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();
vm.bar();
vm.conflicting();

从Console可以看出，Mixins中的"from mixins"被舍去了。

原始码:
https://codepen.io/adjwcmzg/pen/GRvpEYR

Global Mixin

不过，看到这边，那你一定会想，那我可以全域引用mixins物件吗?
答案当然是肯定的，不过一旦全域引用，就会影响所有的Vue实例以及之後建立的Component，包括第三方元件喔，所以要谨慎使用。

Vue.mixin({
  created: function() {
    var myOption = this.$options.myOption;
    if (myOption) {
      console.log(myOption);
    }
  },
});

new Vue({
  myOption: 'Hello World!',
});

原始码:
https://codepen.io/adjwcmzg/pen/WNEQOLR