VUE渲染函数学习

h()创建vnodes

import { h } from 'vue'

const vnode = h(
  'div', // type-标签名称
  { id: 'box', class: 'box1' } // props,
  [] // children-子元素或文本
)

1. h() 可以在 children 处包含 vnode 和字符串，并且可以嵌套多个 h() 来创建下一级的 vnode;
2. h() 中触发事件处理函数可以排 prop 对象中直接以 onClick: () => {} 形式直接书写;
3. props 不存在的时候可以直接省略不写

h('div', [h('span', 'hello')])

4. 类与样式的书写

h('div', { class: [foo, { bar }], style: { color: 'red' } })

声明渲染函数

当组合式 API 与模板一起使用时，setup() 钩子的返回值是用于暴露数据给模板。然而当我们使用渲染函数时，可以直接把渲染函数返回:

import { h } from 'vue'

export default {
    props: {
        total: { type: Number, default: 0 }
    },
    setup (props) {
        const count = ref(1)
        return () => h('div', { style: { color: skyblue } }, count.value + props.total)
    }
}

1. 在 setup() 内部声明的渲染函数天生能够访问在同一范围内声明的 props 和许多响应式状态。
2. 当需要创建多个根节点时可以返回包含多个渲染函数的数组或是返回一个字符串

import { h } from 'vue'

export default {
  setup() {
    // 使用数组返回多个根节点
    return () => [
      h('div'),
      h('div'),
      h('div')
    ]
  }
}

Vnodes 必须唯一

在使用 h() 渲染 vnode 时，不能够使用变量定义的渲染函数多处使用，重复的 vnodes 是无效的。 如果要渲染多个相同的 vnode 的话，可以在 h() 中使用 map 进行循环渲染:

import { h } from 'vue'

export default {
    setup () {
        return () => h(
            'div',
            Array.from({ length: 10 }).map(() => h('p', 'text'))
        )
    }
}
// 注: Array.from({ length: 10 })此时会生成由10个 undefined 组成的数组