一个基本的渲染函数如下：
// 渲染函数
const render = (h) => h('div', 'Hello, Render Function!');
// 创建 Vue 实例
const app = Vue.createApp({
render
});
// 挂载到元素上
app.mount('#app');
在上述例子中，h 是 createElement 函数的别名，用于创建虚拟 DOM 元素。render 函数返回一个虚拟 DOM 树，这里是一个包含一个 div 元素的简单例子。
在渲染函数中，你可以使用 h 函数创建各种虚拟 DOM 元素，嵌套它们以构建组件的结构。可以在虚拟 DOM 元素上设置各种属性、事件监听器等。
以下是一个稍复杂的渲染函数例子：
const render = (h) => h('div', [
h('h1', 'Vue 3.0 Render Function Example'),
h('ul', [
h('li', 'Item 1'),
h('li', 'Item 2'),
h('li', 'Item 3')
]),
h('button', { on: { click: handleClick } }, 'Click me')
]);
function handleClick() {
console.log('Button clicked!');
}
const app = Vue.createApp({
render
});
app.mount('#app');
在这个例子中，渲染函数创建了一个包含标题、列表和按钮的虚拟 DOM 树。按钮上添加了点击事件监听器。
渲染函数的使用使得你可以更直接地操作虚拟 DOM，同时提供了更多灵活性和控制权。在一些特殊情况下，如需要动态地生成组件、处理大量数据、或者更深入地控制组件的渲染流程时，渲染函数可以成为一个强大的工具。
转载请注明出处：http://www.zyzy.cn/article/detail/510/Vue 3.0