Detaillierte Erläuterung der Schritte zur Verwendung der Vue Mixin-Funktion

Dieses Mal erkläre ich Ihnen ausführlich die Schritte zur Verwendung der Vue-Mixin-Funktion. Was sind die Vorsichtsmaßnahmen bei der Verwendung der Vue-Mixin-Funktion?

Nachdem ich zum Schreiben von Vue-Anwendungen auf Typescript umgestiegen war, geriet ich nach einer Runde von Toolketten und Abhängigkeiten endlich ins Straucheln. Es gibt jedoch einen sehr häufig verwendeten Funktionsmix, und es scheint keine offizielle Lösung zu geben noch.

Ich möchte die Flexibilität und den Komfort von Mixins genießen, aber auch die Sicherheitsgarantie und die reibungslose Verwendung von IntelliSense während der Entwicklung durch das ts-Typsystem genießen.

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 definierten 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 Es ist angemessen, abstrakte Klasse zu verwenden.

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:

Weiterleitung zur Startseite nach dem Teilen der Seite

Detaillierte Erläuterung der Verwendung der Watch-Methode in Vue

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