vue3.0のh関数とは何ですか？-Vue.js-php.cn

vue3.0 では、h 関数は vue の createElement メソッドであり、この関数の機能は、仮想 dom を作成し、dom の変更を追跡し、テンプレートが html にレンダリングされるプロセスを表示することです。

vue3.0のh関数とは何ですか？

この記事の動作環境: Windows 10 システム、Vue3 バージョン、DELL G3 コンピューター。

vue3.0 の h 関数とは何ですか

1.関数

h 関数は、テンプレートがどのように機能するかを示すノードを作成します。プロセスでは、vue はローダーを介してページにレンダリングされるため、テンプレート文字列にパッケージ化されて一緒にレンダリングされるため、h 関数も文字列を介して HTML にレンダリングされます。 function は vue の createElement メソッドです。これは、仮想 dom を作成し、dom の変更を追跡するための関数です。

2. h 関数を使用して、app.vue

# でテンプレートを表します。 ##app.vue

main.js vue3.0のh関数とは何ですか？

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.h 関数のソースコード

#4. 備考

vue3.0のh関数とは何ですか？