在Vue3中，h函數是一個非常重要的函數。它可以用來創建虛擬DOM節點，進而實現渲染頁面的功能。

下面是一個簡單的示例，展示了如何使用h函數創建一個簡單的div節點：

import { createApp, h } from 'vue'
const App = {
render() {
return h('div', { class: 'container' }, 'Hello, Vue3!')
}
}
createApp(App).mount('#app')

在這個示例中，我們先從Vue3中導入了createApp和h函數。接著我們創建了一個定義了render方法的App對象。這個方法中返回了通過h函數創建的節點。第一個參數是節點類型，第二個參數是節點屬性，第三個參數是節點中的內容。

實際使用中，我們可以通過嵌套來創建更復雜的節點。下面是一個示例：

import { createApp, h } from 'vue'
const TodoList = {
props: ['todos'],
render() {
return h('ul', { class: 'todo-list' }, this.todos.map(todo =>{
return h('li', { class: { completed: todo.completed } }, todo.title)
}))
}
}
const App = {
data() {
return {
todos: [
{ title: 'Task 1', completed: true },
{ title: 'Task 2', completed: false },
{ title: 'Task 3', completed: false }
]
}
},
render() {
return h('div', { class: 'container' }, [
h('h1', { class: 'title' }, 'Todo List'),
h(TodoList, { todos: this.todos })
])
}
}
createApp(App).mount('#app')

在這個示例中，我們定義了一個TodoList組件和一個App組件。TodoList組件接受一個todos屬性，并根據這個屬性創建一個帶有樣式的列表。App組件中包含一個標題和一個通過TodoList組件渲染的列表。

通過使用h函數，我們可以輕松地創建出復雜的虛擬DOM節點。這使得我們可以更加靈活地控制頁面的展示形式。