Kontamination

Inhaltsverzeichnis

• Grundlagen

• Optionszusammenführung

• Globales Mix-in

• Benutzerdefinierte Optionszusammenführungsstrategie

Basic

Einmischen (Mixins) bieten eine sehr flexible Möglichkeit, wiederverwendbare Funktionalität in Vue-Komponenten zu verteilen. Ein Mixin kann beliebige Komponentenoptionen enthalten. Wenn eine Komponente ein Mixin verwendet, werden alle Optionen des Mixins in die Optionen der Komponente selbst „gemischt“.

Beispiel:

// 定义一个混入对象
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!"

Option merge

Wenn Komponenten und Wenn ein Mixin-Objekt Optionen mit demselben Namen enthält, werden diese Optionen auf die entsprechende Weise „zusammengeführt“.

Zum Beispiel werden Datenobjekte intern rekursiv zusammengeführt, und Komponentendaten haben bei Konflikten Vorrang.

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

Hook-Funktionen mit demselben Namen werden in einem Array zusammengefasst, sodass sie alle aufgerufen werden. Darüber hinaus wird der Hook des gemischten Objekts vor dem eigenen Hook der Komponente aufgerufen. Optionen, deren

var mixin = {
  created: function () {
    console.log('混入对象的钩子被调用')
  }
}
new Vue({
  mixins: [mixin],
  created: function () {
    console.log('组件钩子被调用')
  }
})
// => "混入对象的钩子被调用"
// => "组件钩子被调用"

-Werte Objekte sind, wie z. B. methods, components und directives, werden im selben Objekt zusammengeführt. Wenn die Schlüsselnamen zweier Objekte in Konflikt geraten, wird das Schlüssel-Wert-Paar des Komponentenobjekts verwendet.

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"

Hinweis: Vue.extend() verwendet auch die gleiche Strategie zum Zusammenführen.

Globale Mixins

Mixins können auch global registriert werden. Mit äußerster Vorsicht verwenden! Sobald ein globales Mixin verwendet wird, wirkt es sich auf jede Vue-Instanz aus, die nach erstellt wurde. Bei entsprechender Verwendung kann dies zum Einfügen von Verarbeitungslogik für benutzerdefinierte Optionen verwendet werden.

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

Bitte verwenden Sie globale Mixins mit Vorsicht, da sie sich auf jede individuell erstellte Vue-Instanz auswirken (einschließlich Komponenten von Drittanbietern). In den meisten Fällen sollte dies nur auf benutzerdefinierte Optionen angewendet werden, wie im obigen Beispiel. Es wird empfohlen, es als Plugin zu veröffentlichen, um wiederholte Anwendungsmixins zu vermeiden.

Benutzerdefinierte Optionszusammenführungsstrategie

Benutzerdefinierte Optionen verwenden die Standardstrategie , was einfach den vorhandenen Wert überschreibt. Wenn Sie möchten, dass benutzerdefinierte Optionen mit benutzerdefinierter Logik zusammengeführt werden, können Sie eine Funktion zu Vue.config.optionMergeStrategies hinzufügen:

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
  // 返回合并后的值
}

Für Optionen, bei denen es sich hauptsächlich um Werte als Objekte handelt, können Sie dieselbe Zusammenführungsstrategie wie verwenden methods:

var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods

ist in Vuex 1.x verfügbar Ein fortgeschritteneres Beispiel findet sich in der Mix-in-Strategie:

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