vue3渲染函数(h函数)的变更剖析

h函数的更改总结 1==>h 现在全局导入，而不是作为参数传递给渲染函数 2==>渲染函数参数更改为在有状态组件和函数组件之间更加一致 3==>vnode 现在有一个扁平的 prop 结构 

第一个参数是必须的。【跟原来的是一样的。没有发生变化】 类型:{String | Object | Function} 一个 HTML 标签名、一个组件、一个异步组件、或一个函数式组件。 是要渲染的html标签。 第一个参数div  是表示创建一个div的元素 第二个参数是可选的。 【第二个参数的格式发生了变化， 现在是一个扁平的 prop 结构】 类型:{Object} 主要是当前html中的各种属性。 在开发时。建议传，实在没有传的时候，传入 null 第三个参数可选的。(第三个参数建议使用函数返回，否者会有警告) 类型：{String | Array | Object} children 虚拟子节点(vnodes),当前html标签的元素。 ps:第三个参数建议使用函数返回。否者在控制有警告 Non-function value encountered for default slot. Prefer function slots for better performance. 

{ class: ['button', 'is-outlined'], style: { color: '#34495E' }, attrs: { id: 'submit' }, domProps: { innerHTML: '' }, on: { click: submitForm }, key: 'submit-button' } 

{ class: ['button', 'is-outlined'], style: { color: '#34495E' }, //属性不需要放在 attrs domProps on这些字段下了。 id: 'submit', innerHTML: '', onClick: submitForm, key: 'submit-button' } 

render(h){ return h('div',{ //第二个参数 class:{ 'is-red': true } }, //第三个参数 [h('p','这是一个render')] ); 

//renderTest.vue 

//renderTest.vue 文件 

//页面使用 renderTest.vue这个组件 

//renderTest.vue 文件 

//页面使用 renderTest.vue这个组件 

//renderTest.vue 

//页面使用 renderTest.vue这个组件 

//renderTest.vue 文件 

//页面使用 renderTest.vue这个组件 

1.如果使用ElButton作为标签。需要引入import { ElButton } from 'element-plus'。 否则在页面中无法正常解析。 2. 第三个参数建议使用函数返回。否者在控制有警告 Non-function value encountered for default slot. Prefer function slots for better performance. 详细地址 ：https://cn.vuejs.org/guide/extras/render-function.html#v-if