Lassen Sie uns gemeinsam Vues Mixin lernen

Vorwort

Wenn Sie beim Schreiben einer Vue-Komponente feststellen, dass die Logik mehrerer Komponenten nahezu ähnlich ist, können Sie das Mixin von Vue verwenden, um die ähnliche Logik zu extrahieren, in js zu kapseln und sie dann in jede Komponentenverwendung einzuführen.

mixin wird verwendet, um das Problem der logischen Wiederverwendung von Vue-Komponenten zu lösen. Heute lernen wir Vues Mixin.

mixin

mixin dient hauptsächlich der Wiederverwendung der JS-Logik von Vue, daher handelt es sich im Allgemeinen um eine JS-Datei.

Verwendung

Werfen wir zunächst einen Blick auf die Verwendung

// name.js
export default {
  data () {
    return {
      name: 'mixin的name',
      obj: {name:'mixin', value:'mixin'}
    }
  },
  methods: {
    getName () {
      console.log('我是mixin,name:', this.name)
      console.log('obj:', this.obj)
    }
  },
  mounted () {
    console.log('我是mixin的mounted')
    this.getName()
  }
}

Die Verwendung ist dieselbe wie die der Vue-Komponente. Zum Beispiel Hook-Funktionen, Methoden, Daten usw.

Dann verwenden Sie es in der Komponente und führen Sie es über die Option mixins ein. mixins选项即可引入。

import name from './name.js'
export default {
  mixins: [name],
  data () {
  }
}

那么就会有一个问题，那么如果组件内也定义了同样的钩子函数，同名方法，同名数据，该以谁的为准？是覆盖还是合并？

通过例子来看看

import name from './name.js'
export default {
  mixins: [name],
  data () {
    name: '组件的name',
    obj: {name:'component'}
  },
  methods: {
    getName () {
      console.log('我是组件,name:', this.name)
      console.log('obj:', this.obj)
    }
  },
  mounted () {
    console.log('我是组件的mounted')
    this.getName()
  }
}

打印的结果如下：

通过以上结果可以得到，

钩子函数会合并起来，都会执行。先执行mixins的钩子函数再执行组件的钩子函数。

data的同名数据，要分情况讨论

如果是基本类型，会用组件的同名数据覆盖mixin的数据。

但是如果是对象，会递归对比key，如果是同名key则会覆盖，如果不是同名的，则保留。

methods的方法也是一样，会用组件的方法覆盖mixin的同名方法。

除了上面这些选项，还有比如components（组件），和directivesrrreee Dann wird es eine Frage geben, ob in der Komponente dieselbe Hook-Funktion, dieselbe Methode mit demselben Namen und dieselben Daten mit demselben Namen definiert sind. Wessen sollte sich dann durchsetzen? Überschreiben oder zusammenführen?

Sehen wir uns ein Beispiel an

rrreee

Das gedruckte Ergebnis sieht wie folgt aus:

Sie können es aus den obigen Ergebnissen erhalten

Hook-Funktionen werden zusammengeführt und ausgeführt.

Führen Sie zuerst die Hook-Funktion von Mixins und dann die Hook-Funktion der Komponente aus.
Die gleichnamigen Daten sollten im Einzelfall besprochen werden.

🎜Wenn es sich um einen Basistyp handelt, werden die Daten des Mixins mit den gleichnamigen Daten der Komponente überschrieben. 🎜🎜Wenn es sich jedoch um ein Objekt handelt, wird der Schlüssel 🎜rekursiv🎜 verglichen. Wenn es sich um einen Schlüssel mit demselben Namen handelt, wird er überschrieben. Wenn er nicht denselben Namen hat, wird er beibehalten. Das Gleiche gilt für 🎜🎜methods, die die gleichnamige Methode des Mixins mit der Methode der Komponente überschreiben. 🎜🎜Zusätzlich zu den oben genannten Optionen gibt es auch components (Komponenten) und directives (Anweisungen), die dieselbe Logik haben. Diejenigen mit demselben Namen werden überschrieben und diejenigen von 🎜Komponenten🎜 als Priorität. 🎜🎜Nachteile von Mixin🎜🎜Ich denke, der Nachteil des Prozesses, den ich Mixin verwende, besteht darin, dass die Variablennamen schwer zu finden sind und man nicht leicht glauben kann, dass sie in Mixin definiert sind. 🎜🎜Es wird also angezeigt, ist dieser Variablenname undefiniert? Warum kann ich nur den Ort finden, an dem es verwendet wird, aber nicht den Ort, an dem es definiert ist? 🎜🎜Mir wurde es endlich klar, nachdem ich die Verwendung von Mixin entdeckt hatte. 🎜🎜Empfohlenes Lernen: „🎜vue-Video-Tutorial🎜“🎜🎜

Das obige ist der detaillierte Inhalt vonLassen Sie uns gemeinsam Vues Mixin lernen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!