rander函数
1.render函数
- render函数 和 template 一样都是创建html模板, 有时候template不够灵活,就需要render函数了;
- 函数式组件,他的内部不是响应式的了, 组件无状态(没有data)和无实例(没有 this 上下文); 他们用一个简单的render函数返回
虚拟及诶单使它们渲染的代价更小
1.1 render 函数的返回值(VNode)
Vnode (即: 虚拟节点), 也就是渲染的节点
1.2 render函数的参数(createElement) 也叫 h
createElement 是 render函数的参数, 它本身也是一个函数, 并且有三个参数
- 1.【必填】一个HTML 标签字符串, 组件选项对象,或者 resolve 了上述任何一种的一个 async 函数。
- 2.【可选】一个与模板中 attribute 对应的数据对象。 类型:
- 3.【可选】子级虚拟节点 (VNodes) 类型:
// 等价于
<h3 class="abc">
<h4 class="abc2">我是h5</h4>
</h3>
<script>
export default {
name: 'demo',
render : (h,context) => {// 提供第二个参数作为上下文
return h('h3', { class: 'abc' }, [h('h4', { class: 'abc2' }, '我是h4')])
},
methods:{
}
}
</script>
2.Vue3 h()函数
将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例,实际上也是 JSX 所要求的。
h() 函数是一个用于创建 VNode 的实用程序。也许可以更准确地将其命名为 createVNode(),但由于频繁使用和简洁,它被称为 h()