手写Vue渲染器render函数

使用js对象来描述UI更加的灵活。“这种对象”在vue框架中被称为虚拟DOM，渲染函数内部可以创建虚拟DOM，然后vue.js可以将其内容进行渲染。

1.渲染器的介绍

渲染器的作用就是把虚拟DOM渲染为真实DOM

思考下，我们有一个虚拟 DOM，如何将它转换为真实 DOM

const vnode = {
    tag: 'div',
    props: {
        onClick: () => alert('hello')
    },
    children: 'click me'
}

2.实现渲染函数renderer（只考虑创建没有考虑更新逻辑情况下）

1. 两个参数。参数vnode表示虚拟 DOM 对象，container表示一个真实 DOM 元素，作为挂载点，渲染器会把虚拟 DOM 渲染到该挂载点

2. 使用vnode.tag作为创建的dom标签el

3. 遍历vnode.props，将属性 事件添加到DOM上（事件即给元素添加监听事件；）

4. 处理 children（如果 children 是字符串，说明它是元素的文本子节点用createTextNode；如果children是数组则递归调用render函数渲染子节点并挂载到el元素下）

5. 将元素添加到挂载节点container下