這篇文章將為大家詳細(xì)講解有關(guān)vue3.0中的h函數(shù)是什么意思，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)于2013年創(chuàng)立，先為成武等服務(wù)建站，成武等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為成武企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

在vue3.0中，h函數(shù)就是vue中的createElement方法，這個函數(shù)的作用就是創(chuàng)建虛擬dom，追蹤dom變化，可以實(shí)現(xiàn)展示template如何渲染到html中的過程。

本文操作環(huán)境：windows10系統(tǒng)、Vue3版，DELL G3電腦。

vue3.0中的h函數(shù)是什么

一 、作用

h函數(shù)是創(chuàng)建節(jié)點(diǎn), 可實(shí)現(xiàn)展示template如何渲染到html中的過程，因為vue渲染到頁面上是通過loader打包成模板字符串拼接渲染的，所以 h 函數(shù)同樣也是通過字符串渲染到html中

h函數(shù)就是vue中的createElement方法，這個函數(shù)作用就是創(chuàng)建虛擬dom，追蹤dom變化的

二、將app.vue中的template用h函數(shù)表示

app.vue

main.js

import { createApp, defineComponent, h } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
// defineComponent定義組件
// h創(chuàng)建節(jié)點(diǎn), 可實(shí)現(xiàn)展示template如何渲染到html中得過程，因為vue渲染到頁面上是通過loader打包成模板字符串拼接渲染得，所以 h 函數(shù)同樣也是通過字符串渲染到html中
// 第一個參數(shù) 節(jié)點(diǎn)類型 p為dom原生節(jié)點(diǎn)，需要通過字符串"p"來標(biāo)識
// 第二個參數(shù) 節(jié)點(diǎn)屬性 p節(jié)點(diǎn)得屬性
// 第三個參數(shù) 節(jié)點(diǎn)的孩子節(jié)點(diǎn) 內(nèi)部節(jié)點(diǎn)(子內(nèi)容)
// 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函數(shù)源碼

四、備注

通過源碼可以看到，h函數(shù)其實(shí)就是createVNode，所以也可以引用 createVNode 來代替 h

關(guān)于“vue3.0中的h函數(shù)是什么意思”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

本文題目：vue3.0中的h函數(shù)是什么意思
當(dāng)前路徑：http://jinyejixie.com/article30/podeso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、網(wǎng)頁設(shè)計公司、定制網(wǎng)站、ChatGPT、云服務(wù)器、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)