Detaillierte Erläuterung inkompatibler Änderungen an Rendering-Funktionen in Vue3

// 2.0 Rendering-Funktion export default {
 rendern(h) {
  return h('div')
 }
}

// 3.x-Syntax export default {
 rendern() {
  return h('div')
 }
}

// 2.x
Standard exportieren {
 rendern(h) {
  return h('div')
 }
}

// 3.x
importiere { h, reaktiv } von 'vue'
Standard exportieren {
 setup(Eigenschaft, {Slots, Attribute, emit}) {
  const state = reaktiv({
   Anzahl: 0
  })
  Funktion Inkrement() {
   Zustand.Anzahl++
  }
  // Zurück zur Renderfunktion return () => h(
   'div',
   {
    bei Klick: Inkrement
   },
   Statusanzahl
  )
 }
}

// 2.x
{
 Klasse: ['Schaltfläche', 'ist umrissen'],
 Stil: {Farbe: '#fffff'},
 attr: {id: 'senden'},
 domProps: {innerHTML: ''},
 auf: {click: submitForm},
 Schlüssel: 'Senden-Schaltfläche'
}
// 3.x VNode-Struktur ist flach {
 Klasse: ['Schaltfläche', 'ist umrissen'],
 Stil: { Farbe: '#34495E' },
 ID: "Senden",
 innerHTML: '',
 beim Klicken: Formular absenden,
 Schlüssel: 'Senden-Schaltfläche'
}

// 2.x
h(LayoutComponent, [
 h('div', {slot: 'header'}, dieser.header),
 h('div', {slot: 'header'}, dieser.header)
])
// Bereichssteckplatz:


// 3.x
h(LayoutComponent, {}, {
 Header: () => h('div', dieser.Header),
 Inhalt: () => h('div', dieser.Inhalt)
})
// Wenn Sie Scoped Slots programmgesteuert einführen müssen, werden sie jetzt in der Option $slots vereinheitlicht // 2.x Scoped Slots
dies.$scopedSlots.header
// 3.x schreibe this.$slots.header

<Vorlage>
<Bezeichnung>
 <Eingabetyp="Text" v-bind="$attrs" v-on="$listeners">
</Bezeichnung>
</Vorlage>
<Skript>
 Standard exportieren {
  inheritAttrs: false
 }
</Skript>

<Vorlage>
 <Bezeichnung>
  <Eingabetyp="Text" v-bind="$attrs" />
 </Bezeichnung>
</Vorlage>
<Skript>
Standard exportieren {
 inheritAttrs: false
}
// Wenn diese Komponente ein ID-Attribut und einen v-on:close-Listener erhält, sieht das $attrs-Objekt nun folgendermaßen aus {
 ID: "meine Eingabe",
 onClose: () => console.log('Schließen-Ereignis ausgelöst')
}
</Skript>

<Vorlage>
 <Bezeichnung>
  <Eingabetyp="Text" v-bind="$attrs" />
 </Bezeichnung>
</Vorlage>
<Skript>
Standard exportieren {
 inheritAttrs: false
}
</Skript>
<!-- Schreiben -->
<meine-Komponente id="meine-id" class="meine-klasse"></meine-Komponente>
<!-- vue2 wird generieren -->
<label class="meine-klasse">
 <input type="text" id="meine-id" />
</Bezeichnung>
<!-- vue3 wird generieren -->
<Bezeichnung>
 <input type="text" id="meine-id" class="meine-klasse" />
</Bezeichnung>