Fonction render() de Vue3

Vue3 选项式 APIVue3 API des options

render()La fonction est une fonction très importante dans Vue3 ; son objectif est de générer le DOM virtuel des composants. Le DOM virtuel est un objet JavaScript léger que Vue utilise pour décrire le DOM réel.

Viarender()fonction, Vue peut efficacement mettre à jour et afficher les pages.

Relation avec les templates

En Vue, nous utilisons généralementtemplatepour définir la structure d'un composant. Le template est finalement compilé enrender()fonction. Par conséquent,render()fonction est l'implémentation sous-jacente du template.

Cas d'utilisation

render()La fonction est généralement utilisée dans les scénarios suivants :

  • Lorsque la structure du composant doit être générée dynamiquement.
  • Lorsque le DOM doit être manipulé directement.
  • Dans les scénarios à exigences de performances élevées, optimiser manuellement la logique de rendu.

Syntaxe de base de la fonction render()

render()La fonction reçoit un paramètre, lahfonction de Vue (aussi appeléecreateElementfonction), utilisée pour créer des nœuds DOM virtuels.

Exemple

export default {
  render(h) {
    return h('div', { class: 'container' }, 'Hello, Vue3!');
  }
}

Description des paramètres

  1. Premier paramètre: nom de balise ou nom de composant (chaîne de caractères ou objet composant).
  2. Deuxième paramètre: objet d'attributs (facultatif), utilisé pour définir les attributs DOM, les événements, etc.
  3. Troisième paramètre: nœuds enfants (facultatif), peut être une chaîne de caractères, un tableau ou d'autres nœuds DOM virtuels.

Utilisation avancée de la fonction render()

Génération dynamique de nœuds enfants

render()La fonction peut générer dynamiquement des nœuds enfants en fonction des données.

Exemple

export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Orange']
    }
  },
  render(h) {
    return h('ul', this.items.map(item => h('li', item)));
  }
}

Utilisation des slots

render()La fonction peut, viathis.$slotsaccéder au contenu du slot.

Exemple

export default {
  render(h) {
    return h('div', [
      h('header', this.$slots.header),
      h('main', this.$slots.default),
      h('footer', this.$slots.footer)
    ]);
  }
}

Rendu de composants

render()La fonction peut directement rendre d'autres composants.

Exemple

import MyComponent from './MyComponent.vue';

export default {
  render(h) {
    return h(MyComponent, { props: { message: 'Hello from parent!' } });
  }
}

Optimisation de la fonction render()

Réduction des rendus inutiles

Viarender()function, vous pouvez contrôler manuellement la logique de rendu du composant pour éviter les mises à jour DOM inutiles.

Exemple

export default {
  data() {
    return {
      showMessage: true
    }
  },
  render(h) {
    return this.showMessage ? h('p', 'Hello!') : null;
  }
}

Utilisation de Fragment

Vue3 prend en chargeFragment, et vous pouvezrender()renvoyer plusieurs nœuds racine dans la fonction.

Exemple

export default {
  render(h) {
    return [h('div', 'Left'), h('div', 'Right')];
  }
}

Vue3 选项式 APIVue3 API des options

Autres extensions