Apakah fungsi h dalam vue3.0

Dalam vue3.0, fungsi h ialah kaedah createElement dalam vue Fungsi fungsi ini adalah untuk mencipta dom maya, menjejaki perubahan dom dan memaparkan proses bagaimana templat dirender ke dalam html.

Persekitaran pengendalian artikel ini: sistem Windows 10, versi Vue3, komputer DELL G3.

Apakah fungsi h dalam vue3.0

1 Fungsi

Fungsi h adalah untuk mencipta nod, yang boleh menunjukkan cara templat. diberikan kepada html Dalam proses itu, kerana vue diberikan kepada halaman melalui pemuat, ia dibungkus ke dalam rentetan templat dan diberikan bersama-sama, jadi fungsi h juga diberikan kepada html melalui rentetan

fungsi h ialah kaedah createElement dalam vue, ini Fungsinya adalah untuk mencipta dom maya dan menjejaki perubahan dom

2. Gunakan fungsi h untuk mewakili templat dalam app.vue

apl .vue

utama.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 kod sumber fungsi

4. Nota

Seperti yang anda lihat daripada kod sumber, fungsi h sebenarnya createVNode, jadi anda juga boleh memetik createVNode dan bukannya h

[ Cadangan berkaitan: "tutorial vue.js》】

Atas ialah kandungan terperinci Apakah fungsi h dalam vue3.0. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!