Analyse des Implementierungsprinzips von Vue-Anweisungen

<div id='App'>
  <Eingabetyp="Text" v-Modell="Eingabewert" v-Fokus>
</div>
<Skript>
  Vue.direktive('Fokus', {
    // Rufe bind() auf, wenn du ein Element zum ersten Mal bindest {
      console.log('binden')
    },
    // Wenn das gebundene Element in das DOM eingefügt wird ...
    eingefügt: Funktion (el) {
      console.log('eingefügt')
      el.fokus()
    },
    // Rufe update() auf, wenn die Komponente VNode aktualisiert ist {
      console.log('aktualisieren')
    },
    // Rufen Sie componentUpdated() auf, nachdem alle VNode und seine untergeordneten VNodes der Komponente, in der sich die Anweisung befindet, aktualisiert wurden {
      console.log('Komponente aktualisiert')
    },
    // Wird nur einmal aufgerufen. unbind() wird aufgerufen, wenn die Anweisung vom Element { gelöst wird.
      console.log('aufheben')
    }
  })
  neuer Vue({
    Daten: {
      Eingabewert: ''
    }
  }).$mount('#app')
</Skript>

// src/core/vdom/patch.js
const hooks = ['erstellen', 'aktivieren', 'aktualisieren', 'entfernen', 'zerstören']
Exportfunktion createPatchFunction (Backend) {
  sei i, j
  const cbs = {}

  const { module, nodeOps } = backend
  für (i = 0; i < hooks.length; ++i) {
    cbs[Haken[i]] = []
    // Module entsprechen Modulen in Vue, einschließlich Klasse, Stil, DomListener, DomProps, Attrs, Direktive, Ref, Übergang
    für (j = 0; j < Module.Länge; ++j) {
      wenn (isDef(Module[j][Hooks[i]])) {
        // Schließlich Hooks in {hookEvent: [cb1, cb2 ...], ...} von cbs[hooks[i]].push(modules[j][hooks[i]]) umwandeln.
      }
    }
  }
  // ....
  Rückgabefunktionspatch (alterVnode, vnode, hydratisieren, nur entfernen) {
    // ...
  }
}

{
  Tag: 'Eingabe',
  übergeordnetes Element: ASTElement,
  Anweisungen: [
    {
      arg: null, // Parameterende: 56, // Endzeichenposition der Anweisung isDynamicArg: false, // dynamischer Parameter, v-xxx[dynamicParams]='xxx' Formaufrufmodifikatoren: nicht definiert, // Name des Anweisungsmodifikators: „model“,
      rawName: "v-model", // Befehlsname Start: 36, // Befehlsstartzeichenposition Wert: "inputValue" // Vorlage },
    {
      arg: null,
      Ende: 67,
      isDynamicArg: false,
      Modifikatoren: undefiniert,
      Name: "Fokus",
      Rohname: "v-focus",
      Beginn: 57,
      Wert: ""
    }
  ],
  // ...
}

mit (diesem) {
    return _c('div', {
        Attribute: {
            "id": "App"
        }
    }, [_c('Eingabe', {
        Anweisungen: [{
            Name: "Modell",
            rawName: "v-Modell",
            Wert: (Eingabewert),
            Ausdruck: "Eingabewert"
        }, {
            Name: "Fokus",
            Rohname: "v-focus"
        }],
        Attribute: {
            "Typ": "Text"
        },
        domProps: {
            "value": (inputValue) // Attribute, die bei der Verarbeitung von v-model-Anweisungen hinzugefügt werden},
        An: {
            "input": function($event) { // Benutzerdefiniertes Ereignis, das bei der Verarbeitung der V-Model-Direktive hinzugefügt wird, wenn ($event.target.composing)
                    zurückkehren;
                Eingabewert = $event.target.value
            }
        }
    })])
}

// src/core/vdom/patch.js
Funktion createElm (
    vKnoten,
    eingefügteVnodeQueue,
    übergeordnete Ulme,
    sieheElm,
    verschachtelt,
    BesitzerArray,
    Index
  ) {
    // ...
    // createComponent hat einen Rückgabewert, also die Methode zum Erstellen von Komponenten. Wenn es keinen Rückgabewert gibt, fahren Sie mit der folgenden Methode fort, if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
      zurückkehren
    }

    const data = vnode.data
    // ....
    wenn (isDef(Daten)) {
        // Nachdem der reale Knoten erstellt wurde, aktualisiere die Knotenattribute, einschließlich der Anweisung // Die Anweisung ruft die Bind-Methode zum ersten Mal auf und initialisiert dann die nachfolgende Hook-Methode der Anweisung invokeCreateHooks(vnode, insertedVnodeQueue)
    }
    // Von unten nach oben, einfügen(parentElm, vnode.elm, refElm)
    // ...
  }

// src/core/vdom/modules/directives.js

// Standardmäßig sind alle ausgelösten Methoden updateDirectives method export default {
  erstellen: updateDirectives,
  aktualisieren: Update-Richtlinien,
  zerstören: Funktion unbindDirectives (vnode: VNodeWithData) {
    // Wenn zerstört, vnode === emptyNode
    Update-Direktiven(vnode, leererKnoten)
  }
}

Funktion updateDirectives (alter Vnode: VNodeWithData, vnode: VNodeWithData) {
  wenn (alteVnode.data.directives || vnode.data.directives) {
    _update(alterVnode, vnode)
  }
}

Funktion _update (alterVnode, vnode) {
  const isCreate = alterVnode === leererNode
  const isDestroy = vnode === leerer Knoten
  const oldDirs = normalizeDirectives(alterVnode.data.directives, alterVnode.context)
  const newDirs = normalizeDirectives(vnode.data.directives, vnode.context)
  // Rückruf nach dem Einfügen const dirsWithInsert = [
  // Rückruf nach Abschluss des Updates const dirsWithPostpatch = []

  let-Schlüssel, oldDir, dir
  für (Schlüssel in newDirs) {
    oldDir = oldDirs[Schlüssel]
    dir = newDirs[Schlüssel]
    // Neuer Elementbefehl, führt die eingefügte Hook-Methode einmal aus, wenn (!oldDir) {
      // neue Direktive, binden
      callHook(dir, 'binden', vnode, alter Vnode)
      if (dir.def && dir.def.inserted) {
        dirsWithInsert.push(dir)
      }
    } anders {
      // bestehende Direktive, Update
      // Wenn das Element bereits existiert, wird die componentUpdated-Hook-Methode dir.oldValue = oldDir.value einmal ausgeführt
      dir.oldArg = altesDir.arg
      callHook(dir, 'update', vnode, alter vnode)
      wenn (dir.def && dir.def.componentUpdated) {
        dirsWithPostpatch.push(dir)
      }
    }
  }

  if (dirsWithInsert.length) {
    // Das echte DOM wird in die Seite eingefügt und diese Callback-Methode wird aufgerufen const callInsert = () => {
      für (lass i = 0; i < dirsWithInsert.length; i++) {
        callHook(dirsWithInsert[i], 'eingefügt', vnode, alterVnode)
      }
    }
    // VNode Merge-Insert-Hooks
    wenn (ist erstellt) {
      mergeVNodeHook(vnode, 'insert', callInsert)
    } anders {
      callInsert()
    }
  }

  if (dirsWithPostpatch.Länge) {
    mergeVNodeHook(vnode, 'postpatch', () => {
      für (lass i = 0; i < dirsWithPostpatch.length; i++) {
        callHook(dirsWithPostpatch[i], 'Komponente aktualisiert', vnode, alter Vnode)
      }
    })
  }

  wenn (!istErstellen) {
    für (Schlüssel in oldDirs) {
      wenn (!newDirs[Schlüssel]) {
        // nicht mehr vorhanden, Bindung aufheben
        callHook(alteDirs[Schlüssel], 'aufheben', alterV-Knoten, alterV-Knoten, isDestroy)
      }
    }
  }
}

// src/core/vdom/patch.js
Funktion patchVnode (
    alterVnode,
    vKnoten,
    eingefügteVnodeQueue,
    BesitzerArray,
    Index,
    Nur entfernen
  ) {
    // ...
    const oldCh = oldVnode.children
    const ch = vnode.children
    // Knotenattribute vollständig aktualisieren if (isDef(data) && isPatchable(vnode)) {
      für (i = 0; i < cbs.update.length; ++i) cbs.update[i](alterVnode, vnode)
      wenn (isDef(i = data.hook) und isDef(i = i.update)) i(alterVnode, vnode)
    }
    // ...
    wenn (isDef(Daten)) {
    // Postpatch-Hook aufrufen, wenn (isDef(i = data.hook) und isDef(i = i.postpatch)) i(oldVnode, vnode)
    }
  }