Explication détaillée de la fonction de rendu dans Vue3 : Maîtriser le rendu personnalisé des composants Vue3

Explication détaillée de la fonction de rendu dans Vue3 : maîtrisez le rendu personnalisé des composants Vue3

Vue3 est la dernière version du framework Vue, apportant de nombreuses nouvelles fonctionnalités et fonctions intéressantes, dont l'une est la refonte et la mise à niveau de la fonction de rendu. La fonction de rendu de Vue3 peut non seulement personnaliser la méthode de rendu des composants Vue3, mais également mieux prendre en charge TypeScript et l'API de composition. Cet article présentera en détail la fonction de rendu dans Vue3 pour aider les lecteurs à maîtriser les composants de rendu personnalisé de Vue3.

Qu'est-ce que la fonction de rendu ?

Dans Vue, le modèle est le principal moyen de créer des modèles de composants. Mais en fait, le modèle n’est qu’un sucre syntaxique et est compilé en interne dans une fonction de rendu. Par conséquent, la fonction de rendu est la fonction de rendu la plus basique du composant Vue, et sa fonction principale est de restituer le composant dans un nœud DOM.

La fonction de rendu dans Vue3 est légèrement différente de celle de Vue2. Elle ne reçoit plus la fonction h comme premier paramètre, mais renvoie directement un VNode (nœud virtuel), ce qui signifie que nous n'avons pas besoin d'introduire la fonction h séparément. . Par exemple : le paramètre reçu par la fonction de rendu dans

// Vue2中的render函数
render: function (h) {
  return h('div', 'hello world')
}

// Vue3中的render函数
render: function () {
  return h('div', 'hello world')
}

Vue3 est toujours un objet contextuel (ctx). Cet objet contextuel contient toutes les propriétés et méthodes de l'instance de composant actuelle, telles que les accessoires, les données, les méthodes, etc. Cependant, dans Vue3, nous pouvons utiliser la syntaxe de déstructuration d'ES6 pour simplifier le code :

render({props, data, slots, attrs, emit}) {
   // ...
}

Lors de l'utilisation de la fonction de rendu, nous devons la déclarer explicitement dans les options du composant. Par exemple :

export default {
  render() {
    return h('div', 'hello world')
  }
}

La syntaxe et l'utilisation de la fonction de rendu

Dans Vue3, nous pouvons utiliser la fonction de rendu pour créer des modèles de composants, et nous pouvons également utiliser la syntaxe JSX pour simplifier le code.

// 在组件选项中使用render函数
export default {
  render() {
    return h('div', 'hello world')
  }
}

// 使用JSX语法创建模板
export default {
  render() {
    return (
      <div>
        <h1 id="Hello-World">Hello World</h1>
      </div>
    )
  }
}

Dans la fonction de rendu, nous pouvons renvoyer différents nœuds VNode, tels que des nœuds HTML, des nœuds de composants, des nœuds de texte, etc. Dans le même temps, nous pouvons également utiliser des instructions de contrôle telles que des instructions conditionnelles et des instructions de boucle pour restituer les composants en fonction de situations spécifiques.

export default {
  props: {
    msg: String
  },
  render() {
    if (this.msg) {
      return (
        <div>
          <h1 id="this-msg">{this.msg}</h1>
        </div>
      )
    } else {
      return (
        <div>
          <h1 id="No-message">No message</h1>
          <p>Please add message prop</p>
        </div>
      )
    }
  }
}

Dans la fonction de rendu, nous pouvons également utiliser des slots pour restituer les composants avec flexibilité. Nous pouvons utiliser l'emplacement par défaut pour définir un emplacement par défaut, ou nous pouvons définir un emplacement nommé.

export default {
  render() {
    return (
      <div>
        <h1 id="Header">Header</h1>
        <slot name="content">
          <p>No content provided</p>
        </slot>
        <h1 id="Footer">Footer</h1>
      </div>
    )
  }
}

Un emplacement nommé est utilisé dans ce composant, et l'emplacement est nommé contenu. Si aucun contenu portant le nom content n'est fourni dans la balise de composant, le contenu par défaut fourni dans l'emplacement est utilisé.

Avantages de la fonction de rendu

render函数提供了比模板更加灵活的自定义渲染方式。
使用render函数可以获得更高性能的组件。
使用render函数可以更好地支持TypeScript和Composition API。
随着Vue3里的Composition API的出现，组件模板要做的事情也逐渐移交给了组件逻辑中的各个功能单元，render函数的运用也就更加广泛。

La fonction de rendu de Vue3 est l'une des nouvelles fonctionnalités intéressantes, qui offre une manière plus flexible de rendu personnalisé. On peut dire que maîtriser la fonction de rendu est une compétence nécessaire pour créer d'excellents composants Vue3. Cet article a expliqué aux lecteurs en détail ce qu'est la fonction de rendu dans Vue3, comment l'utiliser et ses avantages. J'espère que cela pourra aider les lecteurs à mieux contrôler la fonction de rendu et à créer de meilleurs composants Vue3.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!