Quelle est la fonction h dans vue3.0

Dans vue3.0, la fonction h est la méthode createElement dans vue. La fonction de cette fonction est de créer un dom virtuel, de suivre les modifications du dom et de réaliser le processus de présentation du rendu du modèle en HTML.

L'environnement d'exploitation de cet article : système Windows 10, version Vue3, ordinateur DELL G3.

Qu'est-ce que la fonction h dans vue3.0 ?

1. Fonction

La fonction h consiste à créer des nœuds, qui peuvent réaliser le processus consistant à montrer comment le modèle est rendu en HTML, car lorsque la vue est rendue au format page, il est empaqueté dans un modèle via l'épissage et le rendu de chaînes du chargeur, de sorte que la fonction h est également rendue en HTML via des chaînes

La fonction h est la méthode createElement dans vue La fonction de cette fonction est de créer un dom virtuel et un suivi. dom changes

Deuxièmement, ajoutez app.vue Le modèle dans est représenté par la fonction h

app.vue

main.js

import { createApp, defineComponent, h } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
// defineComponent定义组件
// h创建节点, 可实现展示template如何渲染到html中得过程，因为vue渲染到页面上是通过loader打包成模板字符串拼接渲染得，所以 h 函数同样也是通过字符串渲染到html中
// 第一个参数 节点类型 p为dom原生节点，需要通过字符串"p"来标识
// 第二个参数 节点属性 p节点得属性
// 第三个参数 节点的孩子节点 内部节点(子内容)
// import App from './App.vue'

const img = require('./assets/logo.png') // eslint-disable-line
// 由于ts中不支持require所以需要取消校验，直接加注释方可
const App = defineComponent({
  render() {
    return h('p', { id: 'app' }, [
      h('img', {
        alt: 'vue.logo',
        src: img,
      }),
      h(HelloWorld, {
        msg: 'Welcome to Your Vue.js + TypeScript App',
        name: '李四',
        age: 15,
        sex: '男',
      }),
    ])
  },
})

3. code source de la fonction h

4 . Remarques

Vous pouvez voir à travers le code source, la fonction h En fait, il s'agit de createVNode, vous pouvez donc également citer createVNode au lieu de h

[Recommandation associée : "Tutoriel vue.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!