首頁  >  文章  >  web前端  >  vue3.0中的h函數是什麼

vue3.0中的h函數是什麼

WBOY
WBOY原創
2022-03-16 10:55:186692瀏覽

在vue3.0中,h函數就是vue中的createElement方法,這個函數的作用就是創建虛擬dom,追蹤dom變化,可以實現展示template如何渲染到html中的過程。

vue3.0中的h函數是什麼

本文操作環境:windows10系統、Vue3版,DELL G3電腦。

vue3.0中的h函數是什麼

一、作用

h函數是建立節點, 可實現展示template如何渲染到html中的過程,因為vue渲染到頁面上是透過loader打包成模板字串拼接渲染的,所以h 函數同樣也是透過字串渲染到html中

h函數就是vue中的createElement方法,這個函數作用是創建虛擬dom,追蹤dom變化的

二、將app.vue中的template用h函數表示

app.vue
vue3.0中的h函數是什麼

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: '男',
      }),
    ])
  },
})

三、h函數原始碼

vue3.0中的h函數是什麼

#4、備註

透過原始碼可以看到,h函數其實就是createVNode,所以也可以引用createVNode 來取代h

【相關推薦:《vue.js教學》 】

以上是vue3.0中的h函數是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn