Vue渲染器的简单实现过程需要做到的几点是：
1.生成vnode；
2.把vnode挂载到真实的dom上面；
3.vnode之间进行patch，并挂载到真实dom；
1.生成vnode
vnode本质是一个js对象，对象中有非常多的属性描述节点，vue源码中创建的vnode属性非常多，但是在简单模拟中，我只选取其中最为重要的三个属性tag（节点类型）,props（包裹了事件监听函数、样式相关的class、style等属性）,children（子节点）进行模拟。
要生成vnode，需要定义h函数，该函数接收上述属性作为参数，再包裹为对象返回回来从而得到vnode。
2.挂载
定义一个mount函数，将生成的vnode作为参数传进去的同时，vnode挂载到哪里去呢？需要指定对应的容器一起传入。
创建对应tag的真实的element，处理虚拟节点的props（暂时只考虑界节点的事件监听和其他不需要做额外处理的属性），处理节点为文本类型（children为string）的情况，并挂载到传入的容器
在页面挂载一个试一试
文本类型顺利挂载之后，假如节点有他的子节点呢，那么遍历子节点，并调用mount函数挂载到该节点上（相当于一个递归操作）
传入子节点试试：
基本上，挂载功能实现了，下一步是视图发生变化，vnode之间patch的实现
3.vnode之间的patch
首先，判断两个vnode之间是不是相同的类型，如果不是相同的类型，简单粗暴的将之前的el卸载掉，挂载新的。
如果vnode是相同类型：
取出el对象，并处理所有props（新的props就加上，旧的就删掉）
处理children：假如新children是string，给到el（也可以说是替换）；如果新children是数组，再去判断旧children是string还是数组，
旧children是string：将文本清空，将新children遍历挂载到el；旧children是数组，进行patch。
children之间的pacth操作就是源码中没有key的patch，感兴趣可以查看我的patch过程中有无key属性的相关源码梳理
模拟一下：
效果：
patch函数代码如下：
const patch = (n1, n2) => {
// 先判断类型tag是否一样
if (n1.tag !== n2.tag) {
const n1ElParent = n1.el.parentElement
n1ElParent.removeChild(n1.el)
mount(n2, n1ElParent)
} else {
// 1.取出element对象，并且在n2中进行 保存
const el = n2.el = n1.el
// 2.处理props
const oldProps = n1.props || {}
const newProps = n2.props || {}
// 2.1获取所有newprops 添加到el
for (const key in newProps) {
const oldValue = oldProps[key]
const newValue = newProps[key]
if (newValue !== oldValue) {
if (key.startsWith('on')) { // 对事件监听的判断
el.addEventListener(key.slice(2).toLowerCase(), newValue)
} else {
el.setAttribute(key, newValue)
}
}
}
// 2.2删除旧的props
for (const key in oldProps) {
if (!(key in newProps)) {
const value = oldProps[key]
if (key.startsWith('on')) { // 对事件监听的判断
el.removeEventListener(key.slice(2).toLowerCase(), value)
} else {
el.removeAttribute(key)
}
}
}
// 3.处理children
const oldChildren = n1.children || []
const newChildren = n2.children || []
if (typeof newChildren === 'string') { // 情况1: newChildren本身是string
if (typeof oldChildren === 'string') {
if (oldChildren !== newChildren) {
el.textContent = newChildren
}
} else {
el.innerHTML = newChildren
}
} else { // 情况2:newChildren本身是数组
if (typeof oldChildren === 'string') {
el.innerHTML = ''
newChildren.forEach(item => {
mount(item, el)
})
} else {
// oldChildren: [v1, v2, v3, v6]
// newChildren: [v1, v5, v6, v8, v9]
// 1.前面又相同节点的元素进行patch操作
const commonLength = Math.min(oldChildren.length, newChildren.length)
for (let i = 0; i<commonLength; i++) {
patch(oldChildren[i], newChildren[i])
}
// 2.newChildren.length > oldChildren.length
if(newChildren.length > oldChildren.length) {
newChildren.slice(oldChildren.length).forEach(item=>{
mount(item,el)
})
}
// 3.newChildren.length < oldChildren.length
if(newChildren.length < oldChildren.length) {
oldChildren.slice(newChildren.length).forEach(item=>{
console.log(item.el)
el.removeChild(item.el)
})
}
}
}
}
}
