Qu'est-ce que h dans la méthode de rendu de Vue ?

                                                     

Si vous êtes en contact avec vue depuis un certain temps, vous avez peut-être rencontré la méthode rendering dans votre fichier d'application - dans la dernière version de CLI C'est une valeur par défaut et elle se trouve dans le fichier main.js :

new Vue({
 render: h => h(App)
}).$mount('#app')

Ou, si vous utilisez la méthode (fonction) render, vous pouvez utiliser JSX :

Vue.component('jsx-example', {
  render (h) {
    return <p id="foo">bar</p>
  }
})

Peut-être que vous tu veux savoir, à quoi sert h ? Qu'est-ce que ça veut dire? h représente hyperscript . Il fait partie du HTML et signifie Hypertext Markup Language : lorsque nous travaillons sur un script, il est devenu une convention de l'utiliser pour remplacer les nœuds virtuels du DOM. Cette définition est également utilisée dans d'autres documents-cadres. Détails ici Cycle.js.

Sur cette question, Evan a décrit :

L'hyperscript lui-même signifie "un script qui génère une structure HTML"

L'abréviation est h Parce qu'il est plus facile de taper. Il décrit également cela au Frontend Masters dans son atelier Vue avancé.

Vraiment, on pourrait le considérer comme l'abréviation de createElement. Ce sera une forme longue :

render: function (createElement) {
  return createElement(App);
}

Si nous le remplaçons par h alors nous pouvons faire ceci :

render: function (h) {
  return h(App);
}

... qui peut ensuite être raccourci en utilisant ES6 :

render: h => h (App)

La version Vue nécessite jusqu'à trois paramètres :

render(h) {
  return h('p', {}, [...])
}

• Le premier est le type de l'élément (indiqué ici par p).

• Le second est l'objet de données. Nous incluons principalement ici : les accessoires, les attrs, les accessoires dom, la classe et le style.

• Le troisième est un groupe de nœuds enfants. Nous imbriquerons ensuite les appels et renverrons finalement une arborescence de nœuds DOM virtuels.

Des informations plus détaillées peuvent être trouvées dans le Guide Vue.

Le nom hyperscript peut prêter à confusion pour certaines personnes car hyperscript est en fait le nom d'une bibliothèque (non mise à jour de nos jours) et elle possède en fait un petit écosystème. Dans ce cas, nous ne parlons pas de cette implémentation spécifique.

J'espère que cela clarifie les choses pour ceux qui sont confus !

Tutoriel recommandé : "JS"

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!