第一步

先封装一些dom的操作

元素操作：

文本操作：

第二步

在src下创建module文件夹，创建4个文件attr.ts、class.ts、event.ts、style.ts

在class.ts中

如果你传了值为空，那我就直接把以前的删掉，否则就直接把以前的覆盖掉

在style.ts中

• 先判断新的是否有，没有则把整个style清空掉
• 否则再判断老的属性是否存在，如果存在，循环老的，判断老的属性在不在新的里面，如果不在，说明这个属性被删了，那么我们直接把这个属性赋值为空
• 然后把新的所有属性赋值到style中
• 总结：目的就是更新操作，新的不存在全删，新的存在，把老的有，新的没有的属性删掉，然后把新的里面所有属性直接赋值到style中

attr.ts中

没有就删除，有新值就更新

events.ts中

• 先缓存函数，vue上的事件都缓存在_vei中，如果没有就去构造一个
• 如果在缓存中存在当前事件函数，那就把它里面的value替换掉，也就是把函数替换掉
• 如果在缓存中不存在当前事件函数，把on截取掉，然后把剩下的转换成小写
• 然后去判断value是否存在，如果存在说明要绑定的事件，以前没绑过，也就是exists是undifined，那么就去创建一个Invoker，缓存到_vei中，并且去创建一个事件
• 如果value不存在说明以前绑定了，也就是exists存在，那么久去清除对应的事件，从_vei中也清除

最外层patchProp.ts中

第三步

在index中整合上述方法，为渲染时提供方法

extend就是Object.assign

至此，runtime-dom的职责已经写完了，接下来需要用到runtime-core提供的核心方法来处理渲染

注：重写mount的原因是· 我想有清空容器的操作

第四步

runtime-core中

提供的createRenderer方法，目的是创建一个渲染器

renderer.ts中

我们现在把createApp抽离出去，抽离到apiCreateApp.ts

apiCreateApp.ts中

mount中需要做的事情:

• 根据组件创建虚拟节点
• 将虚拟节点和容器获取到后调用render方法进行渲染

创建虚拟节点

先保存组件的属性、组件本身以及应用对应的容器

createVNode

调用render

我们下一步就是去写createVNode方法，去创建虚拟节点

如果您觉得有所收获，麻烦动动小手点个攒，谢谢啦~ 预知后事如何，且听下回分解~