vue中render函数作用以及使用

最近需要流程这个功能，就去研究了一下，wfolw这个东西，里面使用了render去渲染节点，由于是第一次看到，所以就去研究了一下，好了，接下来进入正轨

读前须知：对vue框架中的render有所疑惑即可

官网的解释：render是用于编程式地创建组件虚拟 DOM 树的函数

render 是字符串模板的一种替代，可以使你利用 JavaScript 的丰富表达力来完全编程式地声明组件最终的渲染输出。

预编译的模板，例如单文件组件中的模板，会在构建时被编译为 render 选项。如果一个组件中同时存在 render 和 template，则 render 将具有更高的优先级

一、初次试探

1、所需场景

我们需要建立一个父子关系的组件

①父

<template>
 <div></div>
</template>
<script>
export default {
  name: "HelloWorld",
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

②儿

<template>
  <div>我渴望成功，又唾弃成功</div>
</template>

<script>
export default {};
</script>

<style>
</style>

 2、我们开始操作父组件

我们首先删除掉父组件中的标签模块，使用render来代理标签模板来渲染数据

render函数   它返回的是一个虚拟节点vnode，也就是我们要渲染的节点。

他会接收一个参数h，使用来创捷 元素节点的

<script>
import MyComp from "./MyComp.vue";

export default {
  name: "HelloWorld",
  components: {
    MyComp,
  },
  render(h) {
    return h("div", {}, [h(MyComp)]);
  },
};
</script>

<style scoped>
</style>

h(tag,[option],[children])  

tag：{String | Object | Function} 必填项（就是你要渲染的最外层元素） 

比如：

引入

import MyComp from "./MyComp.vue";

  components: {

    MyComp,

  },

如下是三种方式

示例一：

h("myComp", {
        class: { MyTwo: true },
        on: {
          myNode: () => this.myNode(),
        },
 }),

示例二：

h("MyComp", {
        class: { MyTwo: true },
        on: {
          myNode: () => this.myNode(),
        },
}),

 示例三：

h(MyComp, {
        class: { MyTwo: true },
        on: {
          myNode: () => this.myNode(),
        },
}),

option：{Object} 可选参数（就是你创建元素的属性）这个是重点  

属性	介绍	演示
class	标签类名，可以接收一个字符串也可以接收一个对象	class: "MyTwo"||  class: { MyTwo: true }
domProps	DOM 属性 innerHTML：用来添加标签的内容	domProps: { innerHTML: "流程结束" },
ref	和用来获取dom节点的	ref: "_root"
key	当前元素的key值，必须是唯一标识	key: uuid等,
props	绑定属性
on	绑定事件，可以是自定义事件	on: { aa:()=>{} }
style	绑定样式	style: { //绑定样式marginRight: '15px',display:this.a //a为true 表示隐藏整个按钮}
attrs	html特性

children：  {String | Array} 可选参数（就是你创建元素的子元素）