>[success] # h 函數 1. 在通常情況下我們使用的是模板的形式進行編程，把用戶在`<template></template>`標簽中寫的類似于原生HTML的內容進行編譯，把原生`HTML`的內容找出來，再把非原生`HTML`找出來，經過一系列的邏輯處理生成渲染函數，也就是`render`函數的這一段過程稱之為模板編譯過程。 * **Vue在生成真實的DOM之前，會將我們的節點轉換成VNode，而VNode組合在一起形成一顆樹結構，就是虛擬DOM** 2. `vue `提供了`h() `函數是一個**用于創建 vnode 的一個函數**，其實更準備的命名是 `createVNode() `函數，但是為了簡便在Vue將之簡化為` h()` 函數；其實可以發現[h ](https://github1s.com/vuejs/core/blob/060c5f1d0ae999cd8c8fb965e8526ffab17ac2d1/packages/runtime-core/src/h.ts)函數內部就是一個包裹[createVNode ]([https://github.com/vuejs/vue-next/blob/060c5f1d0ae999cd8c8fb965e8526ffab17ac2d1/packages/runtime-core/src/vnode.ts#L326](https://github.com/vuejs/vue-next/blob/060c5f1d0ae999cd8c8fb965e8526ffab17ac2d1/packages/runtime-core/src/vnode.ts#L326))函數  * 二者的區別 ~~~ h('strong', 'Foo') ~~~ 對于 createVNode，必須執行以下操作: ~~~ createVNode('strong', null, 'Foo') ~~~ 3. `h` 函數用法 ~~~ // 完整參數簽名 function h( type: string | Component, props?: object | null, children?: Children | Slot | Slots ): VNode // 省略 props function h(type: string | Component, children?: Children | Slot): VNode type Children = string | number | boolean | VNode | null | Children[] type Slot = () => Children type Slots = { [name: string]: Slot } ~~~ * 創建原生元素 ~~~ import { h } from 'vue' // 除了 type 外，其他參數都是可選的 h('div') h('div', { id: 'foo' }) // attribute 和 property 都可以用于 prop // Vue 會自動選擇正確的方式來分配它 h('div', { class: 'bar', innerHTML: 'hello' }) // class 與 style 可以像在模板中一樣 // 用數組或對象的形式書寫 h('div', { class: [foo, { bar }], style: { color: 'red' } }) // 事件監聽器應以 onXxx 的形式書寫 h('div', { onClick: () => {} }) // children 可以是一個字符串 h('div', { id: 'foo' }, 'hello') // 沒有 prop 時可以省略不寫 h('div', 'hello') h('div', [h('span', 'hello')]) // children 數組可以同時包含 vnode 和字符串 h('div', ['hello', h('span', 'hello')]) ~~~ * 如果是使用組件，**子節點必須以插槽函數進行傳遞。如果組件只有默認槽，可以使用單個插槽函數進行傳遞。否則，必須以插槽函數的對象形式來傳遞** ~~~ import Foo from './Foo.vue' // 傳遞 prop h(Foo, { // 等價于 some-prop="hello" someProp: 'hello', // 等價于 @update="() => {}" onUpdate: () => {} }) // 傳遞單個默認插槽 h(Foo, () => 'default slot') // 傳遞具名插槽 // 注意，需要使用 `null` 來避免 // 插槽對象被當作是 prop h(MyComponent, null, { default: () => 'default slot', foo: () => h('div', 'foo'), bar: () => [h('span', 'one'), h('span', 'two')] }) ~~~ >[info] ## 案例 1. 使用`h` 函數 可以在` Option API` 或者 `Composition API` 中使用，完成下面視圖效果案例  >[danger] ##### Option Api 案例 * 可以發現使用 h 函數后完全不在需要`template `模板了 * 在使用事件使用不能在使用`@`縮寫了 ，應該使用全程寫法 ~~~ <script> import { h } from 'vue' import Home from "./Home.vue" export default { data() { return { counter: 0 } }, render() { return h("div", { className: "app" }, [ h("h2", null, `當前計數: ${this.counter}`), h("button", { onClick: this.increment }, "+1"), h("button", { onClick: this.decrement }, "-1"), h(Home) ]) }, methods: { increment() { this.counter++ }, decrement() { this.counter-- } } } </script> <style scoped> </style> ~~~ >[danger] ##### Composition API 案例 * 不在使用`this` * `ref` 不在`h` 函數使用時候需要自己進行 `.value` ~~~ <script> import { h, ref } from 'vue' export default { setup() { const counter = ref(0) const increment = () => { counter.value++ } const decrement = () => { counter.value-- } return () => [ h('div', { class: 'info', style: { color: 'red' } }, '你好'), h('div', [ h('h2', { className: 'title' }, '我1是標題'), h('p', { className: 'content' }, '我是內容, 哈哈哈'), ]), h('div', [ h( 'button', { onClick: increment }, // 顯示的內容字符串 '加' ), h('span', `${counter.value}`), h( 'button', { onClick: decrement }, // 顯示的內容字符串 '減' ), ]), ] }, } </script> ~~~ >[danger] ##### 使用setup 語法糖 * 使用 `setup` 語法糖需要在`template`使用定義好的`render `函數 ~~~ <template> <render /> </template> <script setup> import { h, ref } from 'vue' const counter = ref(0) const increment = () => { counter.value++ } const decrement = () => { counter.value-- } const render = () => [ h('div', { class: 'info', style: { color: 'red' } }, '你好'), h('div', [ h('h2', { className: 'title' }, '我1是標題'), h('p', { className: 'content' }, '我是內容, 哈哈哈'), ]), h('div', [ h( 'button', { onClick: increment }, // 顯示的內容字符串 '加' ), h('span', `${counter.value}`), h( 'button', { onClick: decrement }, // 顯示的內容字符串 '減' ), ]), ] </script> ~~~ >[info] ## 綜合案例 * v-for 使用map 來代替了 * v-if 使用三元做判斷 整體完全都是按照js 思路去書寫  ~~~ <script> import { h, ref } from 'vue' export default { setup() { const infos = ref([ { name: 'w', age: '22' }, { name: 'zz', age: '12' }, { name: 'rr', age: '19' }, ]) const show = ref(false) const findInfoByName = (name) => { return infos.value.find((info) => info.name === name) } return () => [ h( 'div', // 用map 替代了v-for infos.value.map(({ name, age }, index) => { return h('div', { key: index }, `${name}--${age}`) }) ), h( 'button', { onClick: () => { show.value = !show.value }, }, '展示/隱藏' ), // 三元代替了 v-if [show.value ? h('div', `${findInfoByName('w').name}`) : ''], ] }, } </script> ~~~ >[info] ## 官網地址 https://cn.vuejs.org/guide/extras/render-function.html#jsx-tsx https://cn.vuejs.org/api/render-function.html#h