Vue3中h()函数和createVNode()函数的简单介绍和用法解读

Vue3中h()函数和createVNode()函数

Vue3中h()函数和createVNode()函数都是Vue3中的虚拟DOM函数，它们都可以用来创建和渲染虚拟DOM，但是它们有着本质的不同。

h()函数

h()函数是Vue3中的一个高阶函数，它接受三个参数，分别是：标签类型、属性对象和子节点数组，它可以用来创建和渲染虚拟DOM，例如：

const vnode = h('div', {
  id: 'app',
  class: 'container'
}, [
  h('h1', null, 'Hello World'),
  h('p', null, 'This is a Vue3 example')
])

createVNode()函数

createVNode()函数是Vue3中的一个函数，它接受五个参数，分别是：标签类型、属性对象、子节点数组、key和ref，它可以用来创建和渲染虚拟DOM，例如：

const vnode = createVNode('div', {
  id: 'app',
  class: 'container'
}, [
  createVNode('h1', null, 'Hello World'),
  createVNode('p', null, 'This is a Vue3 example')
], 'key', 'ref')

从上面的代码可以看出，h()函数和createVNode()函数的使用方法基本相同，只是createVNode()函数多了两个参数，分别是key和ref，它们可以用来标识节点，便于Vue3进行节点的更新和重排。