Detaillierte Erläuterung der Anwendungsfälle der Vue Mixin-Funktion

Dieses Mal werde ich Ihnen den Anwendungsfall der Vue-Mixin-Funktion ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für den Anwendungsfall der Vue-Mixin-Funktion?

Es gibt ein 'vue-class-component' und ein empfohlenes 'vue-property-decorator' in der offiziellen Vuejs-Organisation, diese wurden jedoch nicht entsprechend umgesetzt. Nach Durchsicht des vorherigen Problems gibt es eine Funktion, die schon lange aussteht und von Mixin unterstützt wird.

Es ist nicht kompliziert, schreiben Sie einfach selbst eines.

Letzte Anmerkung: vue-class-component 6.2.0 beginnt mit der Bereitstellung einer Mixins-Methode, die der Implementierungsidee dieses Artikels ähnelt.

Implementiert

import Vue, { VueConstructor } from 'vue'
export type VClass<T> = {
 new(): T
} & Pick<VueConstructor, keyof VueConstructor>
/**
 * mixins for class style vue component
 */
function Mixins<A>(c: VClass<A>): VClass<A>
function Mixins<A, B>(c: VClass<A>, c1: VClass<B>): VClass<A&B>
function Mixins<A, B, C>(c: VClass<A>, c1: VClass<B>, c2: VClass<C>): VClass<A&B&C>
function Mixins<T>(c: VClass<T>, ...traits: Array<VClass<T>>): VClass<T> {
 return c.extend({
  mixins: traits
 })
}

Deklarieren Sie VClass Gleichzeitig werden die statischen Methoden (Extend/Mixin usw.) im Vue-Konstruktor über Pick abgerufen, sodass die tatsächliche Implementierung im folgenden Absatz unterstützt werden kann. Durch Aufrufen der Extend-Methode in einem Vue wird eine neue Unterklasse generiert Unterklassenkonstruktor.

function Mixins<T>(c: VClass<T>, ...traits: Array<VClass<T>>): VClass<T> {
 return c.extend({
  mixins: traits
 })
}

Was ABC betrifft, handelt es sich hierbei um eine rein manuelle Aufgabe der Typdeklaration.

Verwendung

Bei tatsächlicher Verwendung:

import { Component, Vue } from 'vue-property-decorator'
import { Mixins } from '../../util/mixins'
@Component
class PageMixin extends Vue {
 title = 'Test Page'
 redirectTo(path: string) {
  console.log('calling reidrectTo', path)
  this.$router.push({ path })
 }
}
interface IDisposable {
 dispose(...args: any[]): any
}
class DisposableMixin extends Vue {
 _disposables: IDisposable[]
 created() {
  console.log('disposable mixin created');
  this._disposables = []
 }
 beforeDestroy() {
  console.log('about to clear disposables')
  this._disposables.map((d) => {
   d.dispose()
  })
  delete this._disposables
 }
 registerDisposable(d: IDisposable) {
  this._disposables.push(d)
 }
}
@Component({
 template: `
 <p>
  <h1>{{ title }}</h1>
  <p>Counted: {{ counter }}</p>
 </p>
 `
})
export default class TimerPage extends Mixins(PageMixin, DisposableMixin) {
 counter = 0
 mounted() {
  const timer = setInterval(() => {
   if (this.counter++ >= 3) {
    return this.redirectTo('/otherpage')
   }
   console.log('count to', this.counter);
  }, 1000)
  this.registerDisposable({
   dispose() {
    clearInterval(timer)
   }
  })
 }
}
count to 1
count to 2
count to 3
calling reidrectTo /otherpage
about to clear disposables

Beachten Sie, dass das „DisposableMixin“, das Vue direkt erweitert, keine gültige Vue-Komponente ist und auch nicht verwendet werden kann Wird direkt in der Mixins-Option verwendet. Wenn es von einer benutzerdefinierten Komponente verwendet werden soll, die durch Vue.extend erweitert wurde, denken Sie daran, Component zum Einschließen zu verwenden.

const ExtendedComponent = Vue.extend({
 name: 'ExtendedComponent',
 mixins: [Component(DisposableMixin)],
})

Abstrakte Klasse

In Geschäftssystemen verwendete Mixins sind in den meisten Fällen tatsächlich komplexer und bieten einige grundlegende Funktionen, einige Teile müssen jedoch den Nachfolgern überlassen werden Die Verwendung abstrakter Klassen ist angemessen.

abstract class AbstractMusicPlayer extends Vue {
 abstract audioSrc: string
 playing = false
 togglePlay() {
  this.playing = !this.playing
 }
}
class MusicPlayerA extends AbstractMusicPlayer {
 audioSrc = '/audio-a.mp3'
}
class MusicPlayerB extends AbstractMusicPlayer {
 staticBase = '/statics'
 get audioSrc() {
  return `${this.staticBase}/audio-b.mp3`
 }
}

Abstrakte Klassen können jedoch nicht instanziiert werden und erfüllen nicht die { new(): T }-Anforderungen. Daher können sie nur vererbt und nicht gemischt werden. Aus dem gleichen Grund können abstrakte Klassen keine 'vue-class-component' Komponentenfunktion sein Dekoration.

Zu diesem Zeitpunkt müssen wir die implementierten Funktionen in Mixin schreiben, die zu implementierenden Funktionen in die Schnittstelle einfügen und sie von der jeweiligen Klasse implementieren lassen.

interface IMusicSourceProvider {
 audioSrc: string
}
/**
 * @implements IPlayerImplementation
 */
class PlayerMixin extends Vue {
 /** @abstract */
 audioSrc: string
 logSrc() {
  console.log(this.audioSrc)
 }
}
interface IPlayerImplementation extends IMusicSourceProvider {}
class RealPlayer extends Mixins(PlayerMixin) implements IPlayerImplementation {
 audioSrc = '/audio-c.mp3'
}

Diese Art, den Compiler zu täuschen, ist eigentlich ziemlich ungeschickt. Wenn eine bestimmte Klasse PlayerMixin erbt, aber nicht explizit die Implementierung von IPlayerImplementation angibt, kann Ihnen der Compiler diesen Fehler nicht mitteilen. Wir können nur sorgfältig Kommentare in den Code schreiben und hoffen, dass die Benutzer dies nicht vergessen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Praktische Fallanalyse der Progressbar-Komponente

Implementierung der Funktion zum Abrufen von Anfangsbuchstaben im Adressbuch

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Anwendungsfälle der Vue Mixin-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!