Erste Schritte mit benutzerdefinierten Anweisungen in Vue 3.0

Tipp: Bevor Sie diesen Artikel lesen, wird empfohlen, dass Sie den Abschnitt zu benutzerdefinierten Anweisungen in der offiziellen Vue 3-Dokumentation lesen.

1. Benutzerdefinierte Anweisungen

1. Registrieren Sie globale benutzerdefinierte Anweisungen

const app = Vue.createApp({})

// Registriere eine globale benutzerdefinierte Direktive v-focus
app.direktive('Fokus', {
  // Wird aufgerufen, wenn das gebundene Element in das DOM eingebunden wird mounted(el) {
    // Fokuselement el.focus()
  }
})

2. Verwenden Sie globale benutzerdefinierte Anweisungen

<div id="app">
   <Eingabe v-Fokus />
</div>

3. Vollständige Anwendungsbeispiele

<div id="app">
   <Eingabe v-Fokus />
</div>
<Skript>
   const { createApp } = Vue

      const app = Vue.createApp({}) // ①
   app.direktive('Fokus', { // ②
      // Wird aufgerufen, wenn das gebundene Element in das DOM eingebunden wird mounted(el) {
       el.focus() // Fokuselement }
   })
   app.mount('#app') // ③
</Skript>

Wenn die Seite geladen wird, erhält das Eingabefeldelement auf der Seite automatisch den Fokus. Der Code dieses Beispiels ist relativ einfach und umfasst hauptsächlich drei Schritte: Erstellen eines App-Objekts, Registrieren globaler benutzerdefinierter Anweisungen und Mounten der Anwendung. Die Details zum Erstellen des App-Objekts werden in nachfolgenden Artikeln separat vorgestellt. Im Folgenden konzentrieren wir uns auf die Analyse der anderen beiden Schritte. Lassen Sie uns zunächst den Prozess der Registrierung globaler benutzerdefinierter Anweisungen analysieren.

2. Der Prozess der Registrierung globaler benutzerdefinierter Anweisungen

Im obigen Beispiel verwenden wir die Direktive-Methode des App-Objekts, um eine globale benutzerdefinierte Direktive zu registrieren:

app.direktive('Fokus', {
  // Wird aufgerufen, wenn das gebundene Element in das DOM eingebunden wird mounted(el) {
    el.focus() // Fokuselement }
})

Natürlich können wir neben der Registrierung globaler benutzerdefinierter Anweisungen auch lokale Anweisungen registrieren, da die Komponente auch eine Anweisungenoption akzeptiert:

Anweisungen: {
  Fokus:
    montiert(el) {
      el.fokus()
    }
  }
}

Für das obige Beispiel verwenden wir die Methode app.directive, die in der Datei runtime-core/src/apiCreateApp.ts definiert ist:

// Pakete/Runtime-Core/src/apiCreateApp.ts
Exportfunktion createAppAPI<HostElement>(
  rendern: RootRenderFunction,
  hydratisieren?: RootHydrateFunction
): CreateAppFunction<HostElement> {
  Rückgabefunktion createApp(rootComponent, rootProps = null) {
    const Kontext = erstelleAppContext()
    let isMounted = false

    const app: App = (context.app = {
      // Etwas Code weglassen _context: Kontext,

            // Wird zum Registrieren oder Abrufen globaler Anweisungen verwendet.
      Direktive(Name: Zeichenfolge, Direktive?: Direktive) {
        wenn (__DEV__) {
          validateDirectiveName(Name)
        }
        wenn (!direktive) {
          returniere context.directives[name] als beliebigen
        }
        wenn (__DEV__ && Kontext.Direktiven[Name]) {
          warn(`Direktive "${name}" wurde bereits in der Ziel-App registriert.`)
        }
        context.directives[name] = Anweisung
        Rückgabe-App
      },

    Rückgabe-App
  }
}

Durch Beobachtung des obigen Codes können wir erkennen, dass die Direktivmethode die folgenden zwei Parameter unterstützt:

• Name: gibt den Namen der Anweisung an;
• Direktive (optional): Gibt die Definition einer Direktive an.

Der Namensparameter ist relativ einfach, daher konzentrieren wir uns auf die Analyse des Direktivenparameters, der vom Typ „Direktive“ ist:

// Pakete/Laufzeit-Kern/src/Direktiven.ts
Exporttyp-Direktive<T = beliebig, V = beliebig> =
  | Objektdirektive<T, V>
  | Funktionsdirektive<T, V>

Aus dem Obigen können wir erkennen, dass der Directive-Typ zu einem Union-Typ gehört, daher müssen wir mit der Analyse der ObjectDirective- und FunctionDirective-Typen fortfahren. Hier schauen wir uns zunächst die Definition des ObjectDirective-Typs an:

// Pakete/Laufzeit-Kern/src/Direktiven.ts
Exportschnittstelle ObjectDirective<T = any, V = any> {
  erstellt?: DirectiveHook<T, null, V>
  vorMount?: DirectiveHook<T, null, V>
  montiert?: DirectiveHook<T, null, V>
  vorUpdate?: DirectiveHook<T, VNode<any, T>, V>
  aktualisiert?: DirectiveHook<T, VNode<any, T>, V>
  vor dem Aushängen?: DirectiveHook<T, null, V>
  nicht gemountet?: DirectiveHook<T, null, V>
  getSSRProps?: SSRDirectiveHook
}

Dieser Typ definiert eine Objekttypdirektive, wobei jede Eigenschaft des Objekts einen Haken im Lebenszyklus der Direktive darstellt. Der Typ FunctionDirective stellt eine Direktive vom Typ Funktion dar:

// Pakete/Laufzeit-Kern/src/Direktiven.ts
Exporttyp FunctionDirective<T = beliebig, V = beliebig> = DirectiveHook<T, beliebig, V>

                              Exporttyp DirectiveHook<T = beliebig, Prev = VNode<beliebig, T> | null, V = beliebig> = (
  el: T,
  Bindung: DirectiveBinding<V>,
  vnode: VNode<beliebig, T>,
  vorherigerVNode: Zurück
) => ungültig

Nachdem wir den Direktiventyp vorgestellt haben, schauen wir uns nun das vorherige Beispiel noch einmal an. Ich glaube, es wird Ihnen viel klarer sein:

app.direktive('Fokus', {
  // Wird ausgelöst, wenn das gebundene Element in das DOM eingebunden wird. mounted(el) {
    el.focus() // Fokuselement }
})

Wenn wir im obigen Beispiel die Methode app.directive aufrufen, um eine benutzerdefinierte Fokusdirektive zu registrieren, wird die folgende Logik ausgeführt:

Direktive(Name: Zeichenfolge, Direktive?: Direktive) {
  if (__DEV__) { // Konflikte zwischen benutzerdefinierten Direktivennamen und vorhandenen integrierten Direktivennamen vermeiden validateDirectiveName(name)
  }
  if (!directive) { // Holen Sie sich das Direktive-Objekt, das dem Namen entspricht return context.directives[name] as any
  }
  wenn (__DEV__ && Kontext.Direktiven[Name]) {
    warn(`Direktive "${name}" wurde bereits in der Ziel-App registriert.`)
  }
  context.directives[name] = Direktive // ​​​​Globale Direktive registrieren returnieren App
}

Wenn die Fokusdirektive erfolgreich registriert wurde, wird die Direktive in der Direktiveneigenschaft des Kontextobjekts gespeichert, wie in der folgenden Abbildung dargestellt:

Wie der Name schon sagt, ist Kontext das Kontextobjekt, das die Anwendung darstellt. Wie also wird dieses Objekt erstellt? Tatsächlich wird dieses Objekt von der Funktion createAppContext erstellt:

const Kontext = erstelleAppContext()

Die Funktion createAppContext ist in der Datei runtime-core/src/apiCreateApp.ts definiert:

// Pakete/Runtime-Core/src/apiCreateApp.ts
Exportfunktion createAppContext(): AppContext {
  zurückkehren {
    app: null wie beliebig,
    Konfiguration: {
      isNativeTag: NEIN,
      Leistung: falsch,
      globaleEigenschaften: {},
      optionMergeStrategies: {},
      isCustomElement: NEIN,
      errorHandler: undefiniert,
      warnHandler: nicht definiert
    },
    Mixins: [],
    Komponenten: {},
    Anweisungen: {},
    bietet: Object.create(null)
  }
}

Glauben Sie vor diesem Hintergrund, dass die interne Verarbeitungslogik zur Registrierung globaler benutzerdefinierter Anweisungen eigentlich ganz einfach ist? Wann wird also der registrierte Fokusbefehl aufgerufen? Um diese Frage zu beantworten, müssen wir einen weiteren Schritt analysieren – die Anwendungsmontage.

3. Anwendungsmontageprozess

Um den Installationsprozess der Anwendung intuitiver zu verstehen, verwendete Abaoge Chrome-Entwicklertools, um den Hauptprozess der Anwendungsinstallation aufzuzeichnen:

Aus dem obigen Bild können wir den Hauptvorgang während der Anwendungsmontage erkennen. Darüber hinaus haben wir auch eine Funktion „resolveDirective“ gefunden, die sich auf Anweisungen aus der Abbildung bezieht. Offensichtlich wird diese Funktion zum Analysieren der Anweisung verwendet und diese Funktion wird in der Rendermethode aufgerufen. Im Quellcode fanden wir die Definition der Funktion:

// Pakete/Laufzeit-Kern/src/helpers/resolveAssets.ts
Exportfunktion resolveDirective(Name: Zeichenfolge): Direktive | undefiniert {
  returniere resolveAsset(RICHTLINIEN, Name)
}

Innerhalb der Funktion „resolveDirective“ wird die Funktion „resolveAsset“ weiterhin aufgerufen, um bestimmte Auflösungsvorgänge auszuführen. Bevor wir die konkrete Implementierung der Funktion „resolveAsset“ analysieren, fügen wir einen Haltepunkt innerhalb der Funktion „resolveDirective“ hinzu, um einen Blick auf die „Schönheit“ der Rendermethode zu werfen:

Im Bild oben sehen wir den Funktionsaufruf _resolveDirective("focus"), der mit der Fokusdirektive verknüpft ist. Wir wissen bereits, dass die Funktion resolveAsset weiterhin innerhalb der Funktion resolveDirective aufgerufen wird. Die konkrete Implementierung dieser Funktion lautet wie folgt:

// Pakete/Laufzeit-Kern/src/helpers/resolveAssets.ts
Funktion „resolveAsset“ (
  Typ: Typ der KOMPONENTEN | Typ der RICHTLINIEN,
  Name: Zeichenfolge,
  warnMissing = true
) {
  const Instanz = aktuelleRenderingInstance || aktuelleInstanz
  wenn (Instanz) {
    const Komponente = Instanz.Typ
    // Die Verarbeitungslogik der Parsing-Komponente weglassen const res =
      // Lokale Registrierung resolve(Instanz[Typ] || (Komponente als Komponentenoptionen)[Typ], Name) ||
      // Globale Registrierung auflösen (instance.appContext[Typ], Name)
    Rückgabewert
  } sonst wenn (__DEV__) {
    warnen(
      `auflösen${capitalize(type.slice(0, -1))} ` +
        `kann nur in render() oder setup() verwendet werden.`
    )
  }
}

Da beim Registrieren der Fokusdirektive die globale Registrierungsmethode verwendet wird, führt der Analysevorgang die Anweisung „resolve(instance.appContext[type], name)“ aus, wobei die „resolve“-Methode wie folgt definiert ist:

Funktion auflösen(Registrierung: Datensatz<Zeichenfolge, beliebig> | undefiniert, Name: Zeichenfolge) {
  zurückkehren (
    Registrierung &&
    (Registrierung[Name] ||
      Registrierung[Camelize(Name)] ||
      Registrierung [Großschreibung (Camelize (Name))])
  )
}

Nach der Analyse des obigen Verarbeitungsflusses können wir erkennen, dass beim Parsen global registrierter Anweisungen das registrierte Anweisungsobjekt über die Auflösungsfunktion aus dem Anwendungskontextobjekt abgerufen wird. Nachdem das Direktivenobjekt _directive_focus abgerufen wurde, ruft die Rendermethode weiterhin die Funktion _withDirectives auf, um die Direktive zum VNode-Objekt hinzuzufügen. Diese Funktion ist in der Datei runtime-core/src/directives.ts definiert:

// Pakete/Laufzeit-Kern/src/Direktiven.ts
Exportfunktion mit Direktiven<T erweitert VNode>(
  vnode: T,
  Anweisungen: Direktivenargumente
): T {
  const internalInstance = currentRenderingInstance // Aktuell gerenderte Instanz abrufen const instance = internalInstance.proxy
  Konstante Bindungen: DirectiveBinding[] = vnode.dirs || (vnode.dirs = [])
  für (lass i = 0; i < direktive.Länge; i++) {
    let [dir, value, arg, modifiers = EMPTY_OBJ] = direktiven[i]
    // Beim Mounten und Aktualisieren dasselbe Verhalten auslösen, unabhängig von anderen Hook-Funktionen if (isFunction(dir)) { // Anweisungen für Funktionstypen verarbeiten dir = {
        gemountet: dir,
        aktualisiert:dir
      } als Objektdirektive
    }
    Bindungen.push({
      dir,
      Beispiel,
      Wert,
      alterWert: void 0,
      arg,
      Modifikatoren
    })
  }
  vnode zurückgeben
}

Da auf einen Knoten mehrere Anweisungen angewendet werden können, definiert die Funktion withDirectives eine dirs-Eigenschaft für das VNode-Objekt und der Wert dieser Eigenschaft ist ein Array. Für das vorherige Beispiel wird nach dem Aufruf der Funktion withDirectives eine dirs-Eigenschaft zum VNode-Objekt hinzugefügt, wie in der folgenden Abbildung gezeigt:

Durch die obige Analyse wissen wir bereits, dass wir in der Rendermethode der Komponente die Direktive über die Funktion withDirectives beim entsprechenden VNode-Objekt registrieren werden. Wann wird also der in der Fokus-Direktive definierte Hook aufgerufen? Bevor wir mit der Analyse fortfahren, stellen wir zunächst die vom Anweisungsobjekt unterstützten Hook-Funktionen vor.

Ein Direktivendefinitionsobjekt kann die folgenden Hook-Funktionen bereitstellen (alle optional):

• erstellt: Wird aufgerufen, bevor die Eigenschaften oder Ereignis-Listener des gebundenen Elements angewendet werden.
• beforeMount: Wird aufgerufen, wenn die Direktive zum ersten Mal an ein Element gebunden wird und bevor die übergeordnete Komponente gemountet wird.
• gemountet: wird aufgerufen, nachdem die übergeordnete Komponente des gebundenen Elements gemountet wurde.
• beforeUpdate: Wird aufgerufen, bevor der VNode, der die Komponente enthält, aktualisiert wird.
• aktualisiert: Wird aufgerufen, nachdem der VNode der enthaltenden Komponente und die VNodes ihrer Unterkomponenten aktualisiert wurden.
• beforeUnmount: Wird aufgerufen, bevor die übergeordnete Komponente des gebundenen Elements ausgehängt wird.
• unmountet: Wird nur einmal aufgerufen, wenn die Direktive von einem Element gelöst und die übergeordnete Komponente ausgehängt wurde.

Nachdem wir diese Hook-Funktionen vorgestellt haben, wollen wir uns nun den zuvor eingeführten ObjectDirective-Typ ansehen:

// Pakete/Laufzeit-Kern/src/Direktiven.ts
Exportschnittstelle ObjectDirective<T = any, V = any> {
  erstellt?: DirectiveHook<T, null, V>
  vorMount?: DirectiveHook<T, null, V>
  montiert?: DirectiveHook<T, null, V>
  vorUpdate?: DirectiveHook<T, VNode<any, T>, V>
  aktualisiert?: DirectiveHook<T, VNode<any, T>, V>
  vor dem Aushängen?: DirectiveHook<T, null, V>
  nicht gemountet?: DirectiveHook<T, null, V>
  getSSRProps?: SSRDirectiveHook

OK, analysieren wir, wann der in der Fokus-Direktive definierte Hook aufgerufen wird. In ähnlicher Weise fügt Abaoge einen Haltepunkt in der gemounteten Methode des Fokusbefehls hinzu:

Im Aufrufstapel auf der rechten Seite der Abbildung sehen wir die Funktion invokeDirectiveHook. Es ist offensichtlich, dass die Funktion den registrierten Hook für die Anweisung aufrufen soll. Aus Platzgründen werde ich nicht auf die spezifischen Details eingehen. Interessierte Freunde können es selbst debuggen.

4. Bruder Abao hat etwas zu sagen

4.1 Was sind die integrierten Anweisungen von Vue 3?

Bei der Einführung der Registrierung globaler benutzerdefinierter Anweisungen haben wir eine Funktion „validateDirectiveName“ gesehen, mit der der Name der benutzerdefinierten Anweisung validiert wird, um Konflikte zwischen dem Namen der benutzerdefinierten Anweisung und dem vorhandenen Namen der integrierten Anweisung zu vermeiden.

// Pakete/Laufzeit-Kern/src/Direktiven.ts
Exportfunktion validateDirectiveName(Name: Zeichenfolge) {
  wenn (istInBuiltInDirective(name)) {
    warnen('Verwenden Sie keine integrierten Direktiven-IDs als benutzerdefinierte Direktiven-IDs: ' + Name)
  }
}

Innerhalb der Funktion validateDirectiveName wird die Anweisung isBuiltInDirective(name) verwendet, um zu bestimmen, ob es sich um eine integrierte Direktive handelt:

const isBuiltInDirective = /*#__PURE__*/ makeMap(
  „Binden, Umhang, sonst-wenn, sonst, für, HTML, wenn, Modell, ein, einmal, vor, anzeigen, Slot, Text“
)

Die Funktion „makeMap“ im obigen Code wird verwendet, um ein Map-Objekt (Object.create(null)) zu generieren und eine Funktion zurückzugeben, die erkennt, ob im Map-Objekt ein Schlüssel vorhanden ist. Darüber hinaus können wir durch den obigen Code klar verstehen, welche integrierten Anweisungen Vue 3 uns bereitstellt.

4.2 Wie viele Arten von Anweisungen gibt es?

In Vue 3 werden Anweisungen in zwei Typen unterteilt: ObjectDirective und FunctionDirective:

// Pakete/Laufzeit-Kern/src/Direktiven.ts
Exporttyp-Direktive<T = beliebig, V = beliebig> =
  | Objektdirektive<T, V>
  | Funktionsdirektive<T, V>

Objektdirektive

Exportschnittstelle ObjectDirective<T = any, V = any> {
  erstellt?: DirectiveHook<T, null, V>
  vorMount?: DirectiveHook<T, null, V>
  montiert?: DirectiveHook<T, null, V>
  vorUpdate?: DirectiveHook<T, VNode<any, T>, V>
  aktualisiert?: DirectiveHook<T, VNode<any, T>, V>
  vor dem Aushängen?: DirectiveHook<T, null, V>
  nicht gemountet?: DirectiveHook<T, null, V>
  getSSRProps?: SSRDirectiveHook
}

Funktionsdirektive

Exporttyp FunctionDirective<T = beliebig, V = beliebig> = DirectiveHook<T, beliebig, V>

                              Exporttyp DirectiveHook<T = beliebig, Prev = VNode<beliebig, T> | null, V = beliebig> = (
  el: T,
  Bindung: DirectiveBinding<V>,
  vnode: VNode<beliebig, T>,
  vorherigerVNode: Zurück
) => ungültig

Wenn Sie beim Mounten und Aktualisieren dasselbe Verhalten auslösen möchten und sich nicht um andere Hook-Funktionen kümmern. Dann können Sie es tun, indem Sie eine Rückruffunktion an die Direktive übergeben

app.direktive('pin', (el, binding) => {
  el.style.position = "fest"
  const s = Bindung.arg || 'oben'
  el.style[s] = Bindungswert + 'px'
})

4.3 Was ist der Unterschied zwischen der Registrierung globaler Anweisungen und lokaler Anweisungen?

Globale Direktiven registrieren

app.direktive('Fokus', {
  // Wird aufgerufen, wenn das gebundene Element in das DOM eingebunden wird mounted(el) {
    el.focus() // Fokuselement }
});

Lokale Richtlinien registrieren

const Komponente = defineComponent({
  Anweisungen: {
    Fokus:
      montiert(el) {
        el.fokus()
      }
    }
  },
  rendern() {
    const { Direktiven } = this.$options;
    return [mitAnweisungen(h('Eingabe'), [[Anweisungen.Fokus, ]])]
  }
});

Analysieren globaler und lokaler Registrierungsanweisungen

// Pakete/Laufzeit-Kern/src/helpers/resolveAssets.ts
Funktion „resolveAsset“ (
  Typ: Typ der KOMPONENTEN | Typ der RICHTLINIEN,
  Name: Zeichenfolge,
  warnMissing = true
) {
  const Instanz = aktuelleRenderingInstance || aktuelleInstanz
  wenn (Instanz) {
    const Komponente = Instanz.Typ
    // Die Verarbeitungslogik der Parsing-Komponente weglassen const res =
      // Lokale Registrierung resolve(Instanz[Typ] || (Komponente als Komponentenoptionen)[Typ], Name) ||
      // Globale Registrierung auflösen (instance.appContext[Typ], Name)
    Rückgabewert
  }
}

4.4 Was ist der Unterschied zwischen den durch integrierte Anweisungen und benutzerdefinierte Anweisungen generierten Rendering-Funktionen?

Um den Unterschied zwischen den durch integrierte Anweisungen und benutzerdefinierte Anweisungen generierten Rendering-Funktionen zu verstehen, verwendet Abaoge die integrierten Anweisungen v-if und v-show sowie die benutzerdefinierte Anweisung v-focus als Beispiele und verwendet dann das Online-Tool Vue 3 Template Explorer zum Kompilieren und Generieren von Rendering-Funktionen:

Integrierte v-if-Direktive

<input v-if="istAnzeigen" />

const _Vue = Vue
Rückgabefunktion rendern(_ctx, _cache, $props, $setup, $data, $options) {
  mit (_ctx) {
    const { createVNode: _createVNode, openBlock: _openBlock,
       Block erstellen: _createBlock, Kommentar-VNode erstellen: _createCommentVNode } = _Vue

    return istAnzeigen
      ? (_openBlock(), _createBlock("Eingabe", {Schlüssel: 0}))
      : _createCommentVNode("v-if", true)
  }
}

Für die v-if-Anweisung wird nach der Kompilierung der ternäre Operator ?: verwendet, um die Funktion zum dynamischen Erstellen von Knoten zu implementieren.

Integrierte v-show-Direktive

<input v-show="istShow" />

  const _Vue = Vue
Rückgabefunktion rendern(_ctx, _cache, $props, $setup, $data, $options) {
  mit (_ctx) {
    const { vShow: _vShow, createVNode: _createVNode, mit Direktiven: _mit Direktiven,
       Block öffnen: _openBlock, Block erstellen: _createBlock } = _Vue

    return _withDirectives((_openBlock(), _createBlock("Eingabe", null, null, 512 /* NEED_PATCH */)), [
      [_vShow, istShow]
    ])
  }
}

Die vShow-Direktive im obigen Beispiel ist in der Datei packages/runtime-dom/src/directives/vShow.ts definiert. Diese Direktive ist vom Typ ObjectDirective und definiert vier Hooks: beforeMount, mounted, updated und beforeUnmount.

Benutzerdefinierte v-focus-Direktive

<Eingabe v-Fokus />

const _Vue = Vue
Rückgabefunktion rendern(_ctx, _cache, $props, $setup, $data, $options) {
  mit (_ctx) {
    const { resolveDirective: _resolveDirective, createVNode: _createVNode,
       mit Anweisungen: _mit Anweisungen, Block öffnen: _openBlock, Block erstellen: _createBlock } = _Vue

    const _directive_focus = _resolveDirective("Fokus")
    return _withDirectives((_openBlock(), _createBlock("Eingabe", null, null, 512 /* NEED_PATCH */)), [
      [_Richtlinienfokus]
    ])
  }
}

Durch Vergleich der von den Anweisungen v-focus und v-show generierten Rendering-Funktionen können wir erkennen, dass sowohl die benutzerdefinierte Anweisung v-focus als auch die integrierte Anweisung v-show die Anweisung über die Funktion withDirectives beim VNode-Objekt registrieren. Im Vergleich zu integrierten Anweisungen verfügen benutzerdefinierte Anweisungen über einen zusätzlichen Befehlsanalyseprozess.

Wenn außerdem sowohl die Direktiven v-show als auch v-focus auf das Eingabeelement angewendet werden, wird beim Aufruf der Funktion _withDirectives ein zweidimensionales Array verwendet:

<input v-show="istShow" v-fokus />

const _Vue = Vue
Rückgabefunktion rendern(_ctx, _cache, $props, $setup, $data, $options) {
  mit (_ctx) {
    const { vShow: _vShow, resolveDirective: _resolveDirective, createVNode: _createVNode,
       mit Anweisungen: _mit Anweisungen, Block öffnen: _openBlock, Block erstellen: _createBlock } = _Vue

    const _directive_focus = _resolveDirective("Fokus")
    return _withDirectives((_openBlock(), _createBlock("Eingabe", null, null, 512 /* NEED_PATCH */)), [
      [_vShow, istShow],
      [_Richtlinienfokus]
    ])
  }
}

4.5 Wie wende ich Anweisungen in Rendering-Funktionen an?

Zusätzlich zur Anwendung von Anweisungen in Vorlagen können wir mithilfe der zuvor eingeführten Funktion withDirectives ganz einfach bestimmte Anweisungen in Rendering-Funktionen anwenden:

<div id="app"></div>
<Skript>
   const { createApp, h, vShow, defineComponent, mit Direktiven } = Vue
   const Komponente = defineComponent({
     Daten() {
       return { Wert: true }
     },
     rendern() {
       return [withDirectives(h('div', 'Ich bin Bruder Abao'), [[vShow, this.value]])]
     }
   });
   const app = Vue.createApp(Komponente)
   app.mount('#app')
</Skript>

In diesem Artikel stellt Bruder Abao hauptsächlich vor, wie Anweisungen angepasst und globale und lokale Anweisungen in Vue 3 registriert werden. Um jedem ein tieferes Verständnis für das relevante Wissen zu benutzerdefinierten Anweisungen zu ermöglichen, analysierte Bruder Abao den Registrierungs- und Anwendungsprozess von Anweisungen aus der Perspektive des Quellcodes.

In den folgenden Artikeln wird Bruder Abao einige spezielle Anweisungen geben und sich natürlich auf die Analyse des Prinzips der Zweiwegebindung konzentrieren. Verpassen Sie es nicht, wenn Sie interessiert sind.

Das Obige ist eine ausführliche Einführung in die Verwendung von benutzerdefinierten Anweisungen für Vue 3.0. Weitere Informationen zur Verwendung von benutzerdefinierten Anweisungen für Vue 3.0 finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!