h 函数 、render 函数和 JSX

一、h函数

1、VNode 和 VDOM 的概念

• Vue在生成真实的DOm之前，会将节点转换成VNode，而VNode 组合在一起形成一颗树结构，就是虚拟DOM（VDOM）
• 在template 中编写的的HTML最终也是使用渲染函数生成对应的VNode
• 如果要充分利用JS的编程能力，可以自己来编写createVNode 函数，生成对应的VNode

 2、如何使用h函数

h函数的本质就是createVNode 函数

h函数接收三个参数：

1. 元素的标签名称，如：div、p、h2
2. 元素的属性，如：class
3. 元素的内容，如：[ ]、" "

3、区分h 函数、createVNode 函数、render 函数

1. createVNode 函数的本质就是h 函数，都是用来创建元素的
2. render 函数是标签的渲染函数，创建元素的h 函数 和 createVNode 函数都需要在render 函数中使用

 4、案例：通过render 函数和h 函数实现计数器（opsitions API）

5. h 函数如何渲染组件

6、composition API 中使用render 函数

二、JSX 语法

1、JSX 实现计数器案例（options API）

2、JSX 实现计数器案例（composition API）