1. Introduction
- What vue internally builds is actually a virtual DOM, and the virtual DOM is generated by a virtual node. In essence, a virtual node is a js object
-
In fact, the template we wrote in vue eventually generates the corresponding VNode through the rendering function
-
The h function is a function used to generate VNode, its full name is createVNode
2. Parameter explanation
- The first parameter: the tag name of the node, which is a string, which must be passed. This string can be an HTML tag name, a component, an asynchronous component or a function component
- The second parameter: the attribute of the node, added by object, such as class, style, etc., optional
- The third parameter: the content in the node label, which can be a string, an array or an object, it is VNodes, use the h function to create
// @returns {VNode}
h(
// {String | Object | Function | null} tag
// 一个 HTML 标签名、一个组件、一个异步组件,或者 null。
// 使用 null 将会渲染一个注释。
//
// 必需的。
'div',
// {Object} props
// 与 attribute、prop 和事件相对应的对象。
// 我们会在模板中使用。
//
// 可选的。
{},
// {String | Array | Object} children
// 子 VNodes, 使用 `h()` 构建,
// 或使用字符串获取 "文本 Vnode" 或者
// 有插槽的对象。
//
// 可选的。
[
'Some text comes first.',
h('h1', 'A headline'),
h(MyComponent, {
someProp: 'foobar'
})
]
)
3. Actual use
<template>
<div class='main'>
<render></render>
</div>
</template>
<script setup>
import { ref, onMounted, h } from 'vue'
// render一个标签
const conter = ref(0)
const increment = () => {
conter.value++
}
const decrement = () => {
conter.value--
}
// 将这个render函数保存到一个变量中
const render = () => h("div", { class: "app" }, [
h("h2", { class: "title" }, `当前计数: ${conter.value}`),
h("button", { onclick: increment }, "+"),
h("button", { onclick: decrement }, "-")
])
onMounted(() => {
// 获取子组件的名称和方法
})
</script>
<style scoped lang='less'>
.main {
width: 500px;
height: 500px;
background: #1cd66c;
margin: 0 auto;
}
</style>