V-Bind in Vue verstehen

1. Analyse des wichtigsten Quellcodes von v-bind

1. Wo werden v-bind-Attribute einheitlich gespeichert: attrsMap und attrsList

<p v-bind:title="vBindTitle"></p>

Angenommen, das title ist v-bind für das p-Tag. Analysieren wir nun, wie title in vue verarbeitet wird.

Nachdem Vue dieses HTML-Tag erhalten hat, verarbeitet es das Titelattribut und führt die folgenden Schritte aus:

• HTML analysieren, den Attributsatz attrs herausanalysieren und im start -Callback zurückgeben
• Erstellen Sie ASTElement，createASTElement(... ,attrs, ...)

• Nach der Erstellung generiert ASTElement attrsList und attrsMap
  

Weitere Informationen zum Umgang mit allgemeinen Attributwerten wie v-bind:title nach der Erstellung finden Sie in der folgenden v-bind:src-Quellcodeanalyse.

2. HTML analysieren, den Attributsatz attrs analysieren und im Start-Callback zurückgeben

 
  Funktion handleStartTag (Übereinstimmung) {
    ...
    const l = match.attrs.länge
    const attrs = neues Array(l)
    für (sei i = 0; i < l; i++) {
      const args = match.attrs[i]
      ...
      attrs[i] = {
        Name: args[1],
        Wert: decodeAttr(Wert, shouldDecodeNewlines)
      }
    }
   ...
    if (Optionen.start) {
      // Hier in die Startfunktion hochladen options.start(tagName, attrs, unary, match.start, match.end)
    }
  }

3. Erstellen Sie ASTElement im Start-Callback, createASTElement(..., attrs, ...)

// HTML parsen
parseHTML(Vorlage, {
    ...
    start(tag, attrs, unär, start, ende) {
        let element: ASTElement = createASTElement(tag, attrs, currentParent) // Beachten Sie hier die Attribute
    }
})

4. Nach der Erstellung generiert ASTElement attrsList und attrsMap

// AST-Element erstellen Exportfunktion createASTElement (
  Tag: Zeichenfolge,
  attrs: Array<ASTAttr>, // Attributobjekt-Array parent: ASTElement | void // übergeordnetes Element ist auch ASTElement
): ASTElement { // Gibt ASTElement zurück
  zurückkehren {
    Typ: 1,
    Etikett,
    attrsList: attrs,
    attrsMap: makeAttrsMap(attrs),
    },
    Elternteil,
    Kinder: []
  }
}

5. Datentypdefinition von Attrs

//Deklariere ein ASTAttr-Attribut abstrakter Syntaxbaum Objektdatentyp declare type ASTAttr = {
  Name: Zeichenfolge; // AttributnameWert: beliebig; // Attributwertdynamisch?: Boolesch; // Ist es ein dynamisches Attribut?Start?: Zahl;
  Ende?: Nummer
};

6. Funktion zum Erfassen von Bindungsattributen

Funktion zum Erfassen von Bindungsattributen getBindingAttr und Funktion zum Ausführen von Attributoperationen getAndRemoveAttr

getBindingAttr und seine Unterfunktion getAndRemoveAttr sind sehr nützlich für die Handhabung的v-bind bestimmten Szenarien, d. h. der Abschnitt „Wie v-bind verschiedene Bindungsattribute handhabt“ ist sehr nützlich. Sie werden hier zu Referenzzwecken in der folgenden Quellcodeanalyse v-bind:key , Quellcodeanalyse v-bind:src , Quellcodeanalyse v-bind:class ;v-bind:style und Quellcodeanalyse v-bind:dataset.prop aufgeführt.

Exportfunktion getBindingAttr (
  el: ASTElement,
  Name: Zeichenfolge,
  getStatic?: Boolesch
): ?Zeichenfolge {
  Konstant dynamischer Wert =
    getAndRemoveAttr(el, ':' + Name) ||
    getAndRemoveAttr(el, 'v-bind:' + Name)
  wenn (dynamischerWert != null) {
    returniere ParseFilter(dynamischerWert)
  } sonst wenn (getStatic !== false) {
    const staticValue = getAndRemoveAttr(el, name)
    wenn (statischerWert != null) {
      gibt JSON.stringify(staticValue) zurück
    }
  }
}

// Hinweis: Dadurch wird nur das Attribut aus dem Array (attrsList) entfernt, sodass es
// wird nicht von processAttrs verarbeitet.
// Standardmäßig wird es NICHT aus der Karte (attrsMap) entfernt, da die Karte
// wird während der Codegenerierung benötigt.
Exportfunktion getAndRemoveAttr (
  el: ASTElement,
  Name: Zeichenfolge,
  removeFromMap?: Boolesch
): ?Zeichenfolge {
  lass val
  wenn ((val = el.attrsMap[name]) != null) {
    const list = el.attrsList
    für (sei i = 0, l = Listenlänge; i < l; i++) {
      wenn (Liste[i].name === Name) {
        list.splice(i, 1) // Entfernt ein Attribut aus attrsList, entfernt aber nicht den Break aus attrsMap
      }
    }
  }
  if (entferneAusKarte) {
    el.attrsMap[name] löschen
  }
  Rückgabewert
}

2. So erhalten Sie den Wert von v-bind

Nehmen Sie den folgenden Code als Beispiel, um zu analysieren, wie vue den Wert von v-bind aus dem Quellcode erhält.

Ich werde es analysieren, indem ich einige Szenen aufschreibe:

• Gemeinsame key
• Binden Sie ein allgemeines html attribute：title

• class und style
• Binden Sie eine html DOM property：textContent


vBind:{
    Schlüssel: +neues Datum(),
    Titel: „Dies ist ein HTML-Attribut v-bind“,
    Klasse: "{ borderRadius: isBorderRadius }"
    Stil: "{ min. Höhe: 100 + 'px' , max. Höhe}"
    Textinhalt: „Hallo Vue V-Bind“
}

<div
   v-bind:key="vBind.key"
   v-bind:title="vBind.title"
   v-bind:Klasse="vBind.Klasse"
   v-bind:style="vBind.style"
   v-bind:text-content.prop="vBind.textContent"
 />
</div>

1. v-bind:key-Quellcodeanalyse

Funktion Prozessschlüssel (el) {
  const exp = getBindingAttr(el, 'Schlüssel')
   wenn(exp){
      ...
      el.key = exp;
   }
}

Die Funktion getBindingAttr wird in processKey verwendet. Da wir v-bind verwenden und nicht :, const dynamicValue = getAndRemoveAttr(el, 'v-bind:'+'key') ;, geht getAndRemoveAttr(el, 'v-bind:key') zu attrsMap , um zu bestimmen, ob 'v-bind:key' existiert, nimmt den Wert dieses Attributs als val und löscht ihn aus attrsList , löscht ihn aber nicht aus attrsMap und verwendet schließlich den Wert von 'v-bind:key' , also val, als dynamicValue , gibt dann das Ergebnis der Analyse und Filterung zurück und set das Ergebnis schließlich als key property des Elements in processKey . Anschließend wird es in segments gespeichert. Was segments sind, können Sie im Quellcode oben sehen.

2. v-bind:title Quellcodeanalyse

title ist ein „nicht vue spezifisches“ und gewöhnliches HTML attribute .

Funktion processAttrs(el){
     const list = el.attrsList;
     ...
     wenn (bindRE.test(name)) { // v-binden
        Name = Name.Ersetzen(BindRE, '')
        Wert = parseFilters(Wert)
        ...
        addAttr(el, Name, Wert, Liste[i], …)
      }
}
exportiere const bindRE = /^:|^\.|^v-bind:/
Exportfunktion addAttr(el: ASTElement, Name: Zeichenfolge, Wert: beliebig, Bereich?: Bereich, dynamisch?: boolesch) {
  const attrs = dynamisch
    ? (el.dynamicAttrs || (el.dynamicAttrs = []))
    : (el.attrs || (el.attrs = []))
  attrs.push(rangeSetItem({ Name, Wert, dynamisch }, Bereich))
  el.plain = falsch
}

Durch Lesen des Quellcodes können wir sehen, dass vue bei nativen Attributen wie etwa dem Titel zuerst name und value analysiert und dann eine Reihe von Beurteilungen darüber vornimmt, ob modifiers vorhanden sind ( modifier wird weiter unten ausführlich erläutert) und schließlich attrs von ASTElement aktualisiert, sodass auch attrsList und attrsMap synchron aktualisiert werden.

3. v-bind:class-Quellcodeanalyse

css class ist eine sehr wichtige Ebene in der Darstellung der Front-End-Entwicklung. Daher führt vue auch viele spezielle Verarbeitungen für class durch.

Funktion transformNode (el: ASTElement, Optionen: CompilerOptions) {
  const warn = options.warn || baseWarn
  const staticClass = getAndRemoveAttr(el, 'Klasse')
  wenn (statischeKlasse) {
    el.staticClass = JSON.stringify(staticClass)
  }
  const classBinding = getBindingAttr(el, 'class', false /* getStatic */)
  wenn (Klassenbindung) {
    el.classBinding = Klassenbindung
  }
}

In der Funktion transfromNode wird die statische class über getAndRemoveAttr abgerufen, d. h. „class=‚foo‘“, die gebundene Klasse wird in „ getBindingAttr “ abgerufen, d. h. v-bind:class="vBind.class ‘“ oder v-bind:class="{ borderRadius: isBorderRadius }‘“, und das „classBinding“ von ASTElement wird dem von uns für die spätere Verwendung gebundenen Attribut zugewiesen.

4. v-bind:style-Quellcodeanalyse

Style ist ein HTML attribute , das Stile direkt manipuliert. Es ist nach Class das mportant und intuitivere Attribut. Auch Vue nimmt für dieses Attribut eine Sonderbehandlung vor.

Funktion transformNode (el: ASTElement, Optionen: CompilerOptions) {
  const warn = options.warn || baseWarn
  const staticStyle = getAndRemoveAttr(el, 'Stil')
  wenn (statischer Stil) {
    el.staticStyle = JSON.stringify(parseStyleText(staticStyle))
  }
  const styleBinding = getBindingAttr(el, 'style', false /* getStatic */)
  wenn (Stilbindung) {
    el.styleBinding = Stilbindung
  }
}

In der Funktion transfromNode wird der statische Stil über getAndRemoveAttr abgerufen, d. h. style="{fontSize: '12px' }“, der gebundene Stil wird in „ getBindingAttr “ abgerufen, d. h. v-bind:style="vBind.style"即v-bind:class={ minHeight: 100 + 'px' , maxHeight }“, wobei „maxHeight“ eine Variable ist und styleBinding von ASTElement dem Attribut zugewiesen wird, das wir für die nachfolgende Verwendung gebunden haben.

5. v-bind:text-content.prop Quellcode-Analyse

textContent ist eine native Eigenschaft des DOM-Objekts und kann daher durch „prop“ identifiziert werden. Wenn wir eine DOM-Eigenschaft direkt über Vue festlegen möchten, können wir Änderungen am DOM-Knoten vornehmen.

Schauen wir uns den Quellcode an.

Funktion Prozessattribute(el) {
  const list = el.attrsList
  ...
  wenn (bindRE.test(name)) { // v-binden
      if (Modifikatoren) {
          wenn (Modifikatoren.prop && !isDynamic) {
            Name = Kamelize(Name)
            wenn (Name === 'innerHTML') Name = 'innerHTML'
          }
       }
       wenn (Modifikatoren und Modifikatoren.prop) {
          addProp(el, Name, Wert, Liste[i], isDynamic)
        }
   }
}
Exportfunktion addProp (el: ASTElement, Name: Zeichenfolge, Wert: Zeichenfolge, Bereich?: Bereich, dynamisch?: Boolesch) {
  (el.props || (el.props = [])).push(rangeSetItem({ Name, Wert, dynamisch }, Bereich))
  el.plain = falsch
}
Requisiten?: Array<ASTAttr>;

Aus dem obigen Quellcode können wir ersehen, dass text-content in v-bind:text-content.prop zuerst in CamelCase textContent umgewandelt wird (das liegt daran, dass alle DOM property im CamelCase-Format vorliegen). Vue stellt auch die Kompatibilität mit der falschen Schreibweise innerHtml her und fügt dann das Attribut textContent über den Prop-Bezeichner zu ASTElement的props hinzu, und die Props hier sind im Wesentlichen ein ASTAttr.

Es gibt eine Frage, über die es sich nachzudenken lohnt: Warum das tun? Was sind die Ähnlichkeiten und Unterschiede zu HTML-Attributen?

• Es gibt kein HTML attribute , das den Textinhalt des DOM direkt ändern kann, daher muss es separat markiert werden
• Es ist schneller als das manuelle Aktualisieren von DOM-Textknoten über JS und entfällt die Schritte des DOM-Abfragens und anschließenden Ersetzens des Textinhalts.
• Sie können sehen, welches Attribut wir auf dem Etikett v-gebunden haben, was sehr intuitiv ist
• Tatsächlich kann v-bind:title als v-bind:title.attr，v-bind:text-content.prop ist lediglich, dass vue standardmäßig ein HTML- attribute ohne Modifikatoren verwendet.

6. v-bind modifier.camel.sync Quellcode-Analyse

. camel ist einfach nur camelCase, ganz einfach. Aber .sync ist nicht so einfach, es wird zu einem v-on-Listener erweitert, der den gebundenen Wert der übergeordneten Komponente aktualisiert.

Tatsächlich war ich verwirrt, als ich den .sync-Modifikator zum ersten Mal sah, aber nachdem ich das .sync der Komponente sorgfältig gelesen und mit der tatsächlichen Arbeit kombiniert hatte, erkannte ich seine Leistungsstärke.

<Übergeordnetes
  v-bind:foo="übergeordnet.foo"
  v-on:updateFoo="übergeordnetes.foo = $event"
></Übergeordnet>

In Vue können props nicht direkt von der untergeordneten Komponente über this.props.foo = newFoo geändert werden. Sofern wir dies nicht this.$emit("updateFoo", newFoo)， und dann v-on in der übergeordneten Komponente, um auf updateFoo zu hören. Wenn Sie eine bessere Lesbarkeit wünschen, können Sie den Namen von $emit in update:foo und dann v-on:update:foo ändern.

Gibt es eine prägnantere Möglichkeit, es zu schreiben? ? ? Das ist, was wir hier haben, den .sync-Operator. Es kann wie folgt abgekürzt werden:

<Übergeordnetes Element v-bind:foo.sync="parent.foo"></Übergeordnetes Element>

Lösen Sie es dann in der untergeordneten Komponente über this.$emit("update:foo", newFoo ); aus. Beachten Sie, dass der Ereignisname hier das Format update:xxx haben muss, da im Quellcode von Vue die Verwendung des Modifikatorattributs .sync automatisch einen Listener v-on:update:xxx generiert.

Schauen wir uns den Quellcode an:

wenn (Modifikatoren.camel && !isDynamic) {
  Name = Kamelize(Name)
}
wenn (Modifikatoren.sync) {
  syncGen = genAssignmentCode(Wert, `$event`)
  wenn (!istDynamisch) {
    addHandler(el,`update:${camelize(name)}`,syncGen,null,false,warn,list[i]) 
   // Hyphenate ist eine Silbentrennungsfunktion, wobei camelize eine Camel-Case-Funktion ist, if (hyphenate(name) !== camelize(name)) {
      addHandler(el,`update:${hyphenate(name)}`,syncGen,null,false,warn,list[i])
    }
  } anders {
    // Handler mit dynamischem Ereignisnamen
    addHandler(el,`"update:"+(${name})`,syncGen,null,false,warn,list[i],true)
  }
}

Durch Lesen des Quellcodes können wir Folgendes sehen: Für die Attribute von v-bind:foo.sync bestimmt Vue, ob das Attribut ein dynamisches Attribut ist. Wenn es sich nicht um eine dynamische Eigenschaft handelt, fügen Sie ihr zuerst einen CamelCase-Listener und dann einen mit Bindestrich versehenen Listener hinzu, zum Beispiel v-bind:foo-bar.sync , zuerst v-on:update:fooBar , dann v-on:update:foo-bar . Der v-on-Listener wird über addHandle hinzugefügt. Wenn es sich um ein dynamisches Attribut handelt, wird es nicht in CamelCase geschrieben oder mit Bindestrich versehen. Durch addHandler(el,update:${name}, ...)， wird das Ereignis des dynamischen Attributs ehrlich abgehört.

Um sync in einem Satz zusammenzufassen: sync ist eine Syntaxvereinfachung, die v-bind und v-on zu v-bind.sync und this.$emit('update:xxx' ) vereinfacht. Es bietet einer untergeordneten Komponente eine Möglichkeit, die Daten der übergeordneten Komponente schnell zu aktualisieren.

Dies ist das Ende dieses Artikels zum Verständnis von v-bind in vue. Weitere relevante Inhalte zu v-bind in vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!