Vue3系列(二十)之 函数式编程、createVNode、render及h 函数

945 阅读1分钟

createVNode()

创建虚拟 DOM 节点

  • 第一个参数:创建元素类型,必传
  • 第二个参数:元素属性或者要传递的props
  • 第三个参数:元素内容/子节点

render()

渲染虚拟 DOM 节点

  • 第一个参数:要被渲染的虚拟DOM,必传
  • 第二个参数:指定渲染的位置,必传

了解 h函数

官方文档: cn.vuejs.org/api/render-…

创建一个虚拟DOM节点(vnode)并渲染到页面,h 函数的底层实际上就是用 createVNode + render 实现的。

接收的参数类型

  • 第一个参数:可以是一个字符串,也可以是一个Vue组件定义
  • 第二个参数:元素属性或者要传递的props
  • 第三个参数:元素内容/子节点

示例: 创建原生元素

import { h } from 'vue' 

// 除了 type 外,其他参数都是可选的 
h('div') h('div', { id: 'foo' }) 

// attribute 和 property 都可以用于 prop 
// Vue 会自动选择正确的方式来分配它 
h('div', { class: 'bar', innerHTML: 'hello' }) 

// class 与 style 可以像在模板中一样 
// 用数组或对象的形式书写 
h('div', { class: [foo, { bar }], style: { color: 'red' } })

// 事件监听器应以 onXxx 的形式书写 
h('div', { onClick: () => {} }) 

// children 可以是一个字符串 
h('div', { id: 'foo' }, 'hello') 

// 没有 prop 时可以省略不写 
h('div', 'hello')
h('div', [h('span', 'hello')]) 

// children 数组可以同时包含 vnode 和字符串 
h('div', ['hello', h('span', 'hello')])