Vue render 以及createElement 解析

Vue中的template 里面使用的模版是HTML语法组件的页面，在Vue中都会被编译成render函数，Vue会采用虚拟dom进行页面组件渲染。

render函数基本使用

render不能与template 一起使用，否则无效。

在APP.vue中引入Render.vue

通过render动态渲染节点 Render.vue 修改为

App.Vue 中使用 :tag :data 传参

createElement 第二个参数可以设置属性

 render(createElement){
        return createElement(this.tag,{
           class:'render-color'
        },this.data)
    }

也可以使用 domProps 进行设置

render(createElement){
        return createElement(this.tag,{
        //    class:'render-color',
           domProps:{
               className:'render-color',
               innerHTML:'hahhaha',  // 会替换传进来的data的值
           }
        },this.data)
    }

createElement 第三个参数可以传一个数组，从而实现嵌套

 render(createElement){
        return createElement(this.tag,{
           class:'render-color',
          
        },[createElement('p',{},'balabal')])
    }

createElement 简易版

1. 创建一个createElement

 function Element(type,props,children){
        this.type = type
        this.props = props
        this.children = children
        
    }
    function createElement(type,props,children){
        return new Element(type,props,children)
    }

2. 实现render 函数

function render(obj){
        // 创建节点
        let el = document.createElement(obj.type)
        for (let key in obj.props){
            el.setAttribute(key,obj.props[key])
        }
       
        if(Array.isArray(obj.children)){
            obj.children.forEach(element => {
                // 递归操作，如果当前child不是文本，就继续进行操作，否则创建文本节点
                element = element instanceof Element? render(element):document.createTextNode()
                el.appendChild(element)
            });
        }
        else if (typeof obj.children === 'string'){ // 如果是字符串当成数组进行递归
            el.appendChild(document.createTextNode(obj.children))
        }

        return el
    }

完整代码