Vue verwendet Mixins zur Optimierung von Komponenten

Vue stellt die Mixins-API bereit, mit der wir wiederverwendbare Funktionen aus Komponenten extrahieren, sie in Mixins einfügen und dann Mixins in Komponenten einführen können, wodurch Komponenten weniger aufgebläht werden und die Wiederverwendbarkeit des Codes verbessert wird.

Wie versteht man Mixins? Wir können uns Mixins als Array vorstellen, das ein oder mehrere Mixins enthält. Die Essenz eines Mixins ist ein JS-Objekt, das alle Eigenschaften einer Vue-Instanz haben kann, wie Daten, erstellte Methoden usw., und Sie können Mixins sogar in Mixins verschachteln. Es ist unglaublich!

Hier ist ein einfaches Beispiel:

<div id="app">
  <h1>{{ Nachricht }}</h1>
</div>

const meinMixin = {
  Daten() {
    zurückkehren {
      Nachricht: „Dies ist eine Mixin-Nachricht“
    }
  },
  erstellt() {
    console.log('Mixin erstellt')
  }
}

const vm = neuer Vue({
  el: '#app',
  Mixins: [myMixin],

  Daten() {
    zurückkehren {
      Nachricht: „Dies ist eine Vue-Instanznachricht“
    }
  },
  erstellt() {
    console.log(diese.Nachricht)
    // => Stamm-Vue-Instanz
    console.log('Vue-Instanz erstellt')
    // => myMixin erstellt
    // => Root-Vue-Instanz erstellt
  }
})

Wenn Mixins mit Vue Instance zusammengeführt werden, werden Hook-Funktionen wie erstellt in einem Array zusammengeführt und die Hooks der Mixins werden zuerst aufgerufen. Wenn die Schlüsselwerte von Daten- und Methodenobjekten in Konflikt stehen, wird den Komponenten Vorrang eingeräumt.

PS: Wenn Ihnen das Konzept der Mixins immer noch nicht klar ist, können Sie in der offiziellen Vue-Dokumentation nachlesen, wie die grundlegenden Konzepte und die Verwendung von Vue-Mixins aussehen.

Mixins-Implementierung

Wie werden also Mixins implementiert? Wenn vue instanziiert wird, ruft es die Funktion mergeOptions auf, um Optionen zusammenzuführen. Die Funktion wird in der Datei vue/src/core/util/options.js deklariert.

Exportfunktion mergeOptions(
  übergeordnetes Element: Objekt,
  Kind: Objekt,
  vm?: Komponente
): Objekt {
  ...
  // Wenn child.extends vorhanden ist, rufen Sie rekursiv mergeOptions auf, um das Kopieren des Attributs zu implementieren. const extendsFrom = child.extends
  wenn (erweitertVon) {
    übergeordnetes Element = MergeOptions(übergeordnetes Element, extendsFrom, vm)
  }
  // Wenn child.mixins vorhanden ist, rufe rekursiv mergeOptions auf, um die Eigenschaften zu kopieren, if (child.mixins) {
    für (lass i = 0, l = child.mixins.length; i < l; i++) {
      übergeordnetes Element = mergeOptions(übergeordnetes Element, untergeordnetes Element.mixins[i], vm)
    }
  }
  //Optionen als leeres Objekt deklarieren, um das Kopierergebnis des Attributs zu speichern const options = {}
  lass den Schlüssel
  // Durchlaufe das übergeordnete Objekt und rufe mergeField auf, um die Attribute für (Schlüssel im übergeordneten Objekt) zu kopieren {
    mergeField(Schlüssel)
  }
  // Übergeordnete Objekte durchlaufen und mergeField aufrufen, um die Attribute für (Schlüssel im untergeordneten Objekt) zu kopieren {
    wenn (!hasOwn(übergeordnet, Schlüssel)) {
      mergeField(Schlüssel)
    }
  }
  // Implementierungsmethode zum Kopieren von Attribut function mergeField(key) {
    // Penetrationszuweisung, Standard ist defaultStrat
    const strat = strats[Schlüssel] || Standard-Strat
    Optionen[Schlüssel] = Strategie(übergeordnet[Schlüssel], untergeordnet[Schlüssel], vm, Schlüssel)
  }
  Rückgabemöglichkeiten
}

Um den Code übersichtlich zu halten, wurde der unwichtige Code der Funktion mergeOptions gelöscht. Schauen wir uns die verbleibenden Teile an.

const extendsFrom = untergeordnetes.extends
wenn (erweitertVon) {
  übergeordnetes Element = MergeOptions(übergeordnetes Element, extendsFrom, vm)
}

Deklarieren Sie zunächst, dass die Variable extendsFrom child.extends speichert. Wenn extendsFrom true ist, rufen Sie rekursiv mergeOptions auf, um die Eigenschaften zu kopieren und das Zusammenführungsergebnis in der übergeordneten Variable zu speichern.

wenn (Kind.Mixins) {
  für (lass i = 0, l = child.mixins.length; i < l; i++) {
    übergeordnetes Element = mergeOptions(übergeordnetes Element, untergeordnetes Element.mixins[i], vm)
  }
}

Wenn child.mixins wahr ist, führen Sie eine Schleife durch das Mixins-Array aus und rufen Sie rekursiv mergeOptions auf, um die Eigenschaften zu kopieren und das Zusammenführungsergebnis dennoch in der übergeordneten Variable zu speichern.

Als nächstes folgt die Eigenschaftszuweisung von übergeordnetem und untergeordnetem Element:

const Optionen = {}
lass den Schlüssel

für (Schlüssel im übergeordneten Element) {
  mergeField(Schlüssel)
}

für (Schlüssel in Kind) {
  wenn (!hasOwn(übergeordnet, Schlüssel)) {
    mergeField(Schlüssel)
  }
}

Deklarieren Sie ein leeres Optionsobjekt, um das Ergebnis des Attributkopierens und auch als Rückgabewert des rekursiven Aufrufs von mergeOptions zu speichern.

Hier wird zuerst for...in für das übergeordnete Element der Schleife aufgerufen und die Funktion mergeField wird in der Schleife kontinuierlich aufgerufen.

Rufen Sie dann for...in auf, um eine Schleife über das untergeordnete Element zu erstellen. Hier gibt es einen kleinen Unterschied. Es wird hasOwn aufgerufen, um zu ermitteln, ob der Schlüssel im übergeordneten Element vorhanden ist. Wenn nicht, wird die Funktion mergeField aufgerufen, um wiederholte Aufrufe zu vermeiden.

Wofür genau wird diese MergeField-Funktion verwendet?

Funktion mergeField(Schlüssel) {
  // Penetrationszuweisung, Standard ist defaultStrat
  const strat = strats[Schlüssel] || Standard-Strat
  Optionen[Schlüssel] = Strategie(übergeordnet[Schlüssel], untergeordnet[Schlüssel], vm, Schlüssel)
}

Die Funktion mergeField empfängt einen Schlüssel und deklariert zunächst die Variable strat. Wenn strats[key] wahr ist, weist sie strat strats[key] zu.

const strats = config.optionMergeStrategies
...
optionMergeStrategies: Objekt.create(null),
...

strats ist eigentlich Object.create(null). Object.create wird verwendet, um ein neues Objekt zu erstellen. Standardmäßig ist strats ein leeres Objekt, das durch Aufruf von Object.create(null) generiert wird.

Übrigens stellt vue auch Vue.config.optionMergeStrategies bereit, das benutzerdefinierte Strategien zum Zusammenführen von Optionen implementieren kann.

Wenn strats[key] false ist, wird hier || verwendet, um eine durchdringende Zuweisung durchzuführen und strat die Standardfunktion defaultStrat zuzuweisen.

const defaultStrat = Funktion(übergeordneter Wert: beliebig, untergeordneter Wert: beliebig): beliebig {
  returniere childVal === undefiniert ? parentVal : childVal
}

Die Funktion defaultStrat gibt einen ternären Ausdruck zurück. Wenn childVal nicht definiert ist, gibt sie parentVal zurück, andernfalls childVal. ChildVal hat hier Vorrang, weshalb die Priorität Komponente > Mixins > Erweiterungen gilt.

Die Funktion mergeField weist das Ergebnis des Aufrufs von strat schließlich options[key] zu.

Die Funktion „mergeOptions“ führt schließlich alle Optionen, Mixins und Erweiterungen zusammen, gibt das Optionsobjekt zurück und instanziiert dann Vue.

Zusammenführen von Hook-Funktionen

Schauen wir uns an, wie die Hook-Funktionen zusammengeführt werden.

Funktion mergeHook(
  parentVal: ?Array<Funktion>,
  childVal: ?Funktion | ?Array<Funktion>
): ?Array<Funktion> {
  Rückgabewert für KindVal
    ? übergeordneterWert
      ? übergeordneter Wert.concat(untergeordneter Wert)
      : Array.isArray(untergeordneter Wert)
      ? KindVal
      : [untergeordneter Wert]
    : übergeordneterWert
}

LIFECYCLE_HOOKS.fürEach(hook => {
  Strategien[hook] = mergeHook
})

Durchlaufen Sie das LIFECYCLE_HOOKS-Array, rufen Sie kontinuierlich die Funktion mergeHook auf und weisen Sie den Rückgabewert strats[hook] zu.

exportiere const LIFECYCLE_HOOKS = [
  'vorErstellen',
  'erstellt',
  'vor Mount',
  'montiert',
  'vorUpdate',
  'aktualisiert',
  'vor Zerstörung',
  'zerstört',
  'aktiviert',
  'deaktiviert',
  „Fehler erfasst“
]

LIFECYCLE_HOOKS ist der deklarierte String aller Hook-Funktionen von Vue.

Die Funktion „mergeHook“ gibt einen ternären Ausdruck zurück, der drei Ebenen tief verschachtelt ist.

Rückgabewert für KindVal
  ? übergeordneterWert
    ? übergeordneter Wert.concat(untergeordneter Wert)
    : Array.isArray(untergeordneter Wert)
    ? KindVal
    : [untergeordneter Wert]
  : übergeordneterWert

Wenn childVal auf der ersten Ebene wahr ist, wird der ternäre Ausdruck der zweiten Ebene zurückgegeben, wenn es falsch ist, wird parentVal zurückgegeben.

Die zweite Ebene gibt, wenn parentVal wahr ist, das Array aus parentVal und childVal zusammen zurück, wenn parentVal falsch ist, gibt es den ternären Ausdruck der dritten Ebene zurück.

Die dritte Ebene gibt childVal zurück, wenn childVal ein Array ist, andernfalls wird childVal in ein Array gepackt und zurückgegeben.

neuer Vue({
  erstellt: [
    Funktion() {
      console.log('Los, los, los!')
    },
    Funktion() {
      console.log('Ente, Ente, Ente!')
    }
  ]
})
// => Geh, geh, geh!
// => Ente, Ente, Ente!

Projektpraxis

Freunde, die Vue verwenden, müssen in ihren Projekten natürlich auch Element-UI verwenden. Wenn Sie beispielsweise eine Tabelle verwenden, müssen Sie „tableData“, „total“, „pageSize“ und andere für die Tabelle und die Paginierung erforderliche Parameter deklarieren.

Wir können wiederholte Daten und Methoden in ein TableMixin schreiben.

Standard exportieren {
  Daten() {
    zurückkehren {
      gesamt: 0,
      Seite Nr: 1,
      Seitengröße: 10,
      Tabellendaten: [],
      wird geladen: false
    }
  },

  erstellt() {
    diese.Suchdaten()
  },

  Methoden: {
    //Vorab deklarieren, um Fehler zu vermeiden searchData() {},

    handleSizeChange(Größe) {
      this.pageSize = Größe
      diese.Suchdaten()
    },

    handleCurrentChange(Seite) {
      this.pageNo = Seite
      diese.Suchdaten()
    },

    handleSearchData() {
      diese.Seitennummer = 1
      diese.Suchdaten()
    }
  }
}

Wenn wir es verwenden müssen, können wir es direkt importieren:

importiere tableMixin aus './tableMixin'

Standard exportieren {
  ...
  Mixins: [tableMixin],
  Methoden: {
    Suchdaten() {
      ...
    }
  }
}

Wir werden die Methode searchData in der Komponente neu deklarieren. Bei Schlüsseln in Form von Methodenobjekten gilt: Wenn die Schlüssel identisch sind, überschreibt der Schlüssel in der Komponente den Schlüssel in tableMixin.

Natürlich können wir Mixins auch in Mixins verschachteln, indem wir axiosMixin deklarieren:

importiere tableMixin aus './tableMixin'

Standard exportieren {
  Mixins: [tableMixin],

  Methoden: {
    handleFetch(URL) {
      const { Seitennummer, Seitengröße } = diese
      dies.laden = wahr

      dies.axios({
        Methode: 'post',
        URL (URL = URL = URL),
        Daten: {
          …diese.params,
          SeiteNr,
          Seitengröße
        }
      })
        .then(({ Daten = [] }) => {
          this.tableData = Daten
          dies.laden = falsch
        })
        .catch(Fehler => {
          dies.laden = falsch
        })
    }
  }
}

axiosMixin importieren:

importiere axiosMixin aus „./axiosMixin“

Standard exportieren {
  ...
  Mixins: [axiosMixin],
  erstellt() {
    this.handleFetch('/Benutzer/12345')
  }
}

In Axios können wir die nachfolgenden Aufrufe von Axios hinsichtlich Erfolg und Fehler vorverarbeiten, was uns viel Code erspart.

verlängern

Übrigens ist „extend“ ähnlich wie „mixins“. Es kann nur ein Optionsobjekt übergeben werden, und „mixins“ haben eine höhere Priorität und überschreiben den gleichnamigen Schlüsselwert in „extend“.

// Wenn child.extends vorhanden ist, rufen Sie rekursiv mergeOptions auf, um das Kopieren des Attributs zu implementieren. const extendsFrom = child.extends
wenn (erweitertVon) {
  übergeordnetes Element = MergeOptions(übergeordnetes Element, extendsFrom, vm)
}
// Wenn child.mixins vorhanden ist, rufe rekursiv mergeOptions auf, um die Eigenschaften zu kopieren, if (child.mixins) {
  für (lass i = 0, l = child.mixins.length; i < l; i++) {
    übergeordnetes Element = mergeOptions(übergeordnetes Element, untergeordnetes Element.mixins[i], vm)
  }
}

// Wenn child.extends vorhanden ist, rufen Sie rekursiv mergeOptions auf, um das Kopieren des Attributs zu implementieren. const extendsFrom = child.extends
wenn (erweitertVon) {
  übergeordnetes Element = MergeOptions(übergeordnetes Element, extendsFrom, vm)
}
// Wenn child.mixins vorhanden ist, rufe rekursiv mergeOptions auf, um die Eigenschaften zu kopieren, if (child.mixins) {
  für (lass i = 0, l = child.mixins.length; i < l; i++) {
    übergeordnetes Element = mergeOptions(übergeordnetes Element, untergeordnetes Element.mixins[i], vm)
  }
}

In der Funktion mergeOptions werden zuerst die Eigenschaften von extends kopiert und dann das Mixin. Wenn die Funktion mergeField aufgerufen wird, wird zuerst der untergeordnete Schlüssel übernommen.

Obwohl der gleichnamige Schlüssel von Extended durch Mixins überschrieben wird, hat Extended Vorrang.

Zusammenfassen

Beachten Sie die Priorität von Mixins in Vue: Komponente > Mixins > Erweiterungen.

Wir nennen Mixins vorübergehend Komponentenmodularisierung. Die flexible Verwendung der Komponentenmodularisierung kann doppelten Code innerhalb der Komponente extrahieren, Codewiederverwendung erreichen, unseren Code übersichtlicher machen und die Effizienz erheblich verbessern.

Natürlich warten in Mixins noch mehr magische Operationen darauf, von Ihnen erkundet zu werden.

Oben finden Sie Einzelheiten dazu, wie Vue Mixins zur Optimierung von Komponenten verwendet. Weitere Informationen dazu, wie Vue Mixins zur Optimierung von Komponenten verwendet, finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!