vue 渲染器的实现原理

渲染器renderer的实现思路，总体分为三步

• 创建元素：
• 为元素添加属性和事件
• 处理children

        // 命名虚拟dom
        const vnode = {
            tag:"div",
            props:{
                onClick:()=>alert("hello")
            },
            children:'click me'
        }
        // 渲染器的实现
        function renderer (vnode,container){
            // 使用vnode.tag作为标签名称创建DOM元素
            const el = document.createElement(vnode.tag)
            // 遍历vnode.props 将属性 事件添加到DOM元素
            for(const key in vnode.props){
                if(/^on/.test(key)){  //如果以on开头说明是事件
                    el.addEventListener(
                        key.substr(2).toLowerCase(),
                        vnode.props[key]
                    )
                }
            }
            if(typeof vnode.children === "string"){
                el.appendChild(document.createTextNode(vnode.children))
            }else if(Array.isArray(vnode.children)){
                vnode.children.forEach(child => renderer(child.el)
                    
                );
            }
            container.appendChild(el)
        }
        renderer(vnode,document.body)