那么关于Teleport应用的位置，我们可以为大家举个例子来说明一下。比如说我们在做组件的时候，经常会实现一个dialog。dialog的背景是一个黑的铺满全屏DIV，我们对它的布局是position: absolute。如果父级元素是relative布局，我们的这个背景层就会受它的父元素的影响。那么此时，如果用Teleport直接把父组件定为body，这样它就不会再受到副组件元素样式的影响，就可以确认一个我们想要的黑色背景画。
下面我写一下react和vue的diff算法的比对,我是一边写代码，一边写文章，整理一下思路。注：这里只讨论tag属性相同并且多个children的情况，不相同的tag直接替换，删除，这没啥好写的。
用这个例子来说明：
简单diff，把原有的删掉，把更新后的插入。
变化前后的标签都是li，所以只用比对vnodeData和children即可，复用原有的DOM。
先只从这个例子出发,我只用遍历旧的vnode，然后把旧的vnode和新的vnode patch就行。
这样就省掉移除和新增dom的开销，现在的问题是，我的例子刚好是新旧vnode数量一样，如果不一样就有问题，示例改成这样：
实现思路改成：先看看是旧的长度长，还是新的长，如果旧的长，我就遍历新的，然后把多出来的旧节点删掉，如果新的长，我就遍历旧的，然后多出来的新vnode加上。
仍然有可优化的空间，还是下面这幅图：
通过我们上面的diff算法，实现的过程会比对 preve vnode和next vnode，标签相同，则只用比对vnodedata和children。发现
标签的子节点（文本节点a,b,c）不同，于是分别删除文本节点a,b,c，然后重新生成新的文本节点c,b,a。但是实际上这几个
只是位置不同，那优化的方案就是复用已经生成的dom，把它移动到正确的位置。
怎么移动？我们使用key来将新旧vnode做一次映射。
首先我们找到可以复用的vnode，可以做两次遍历，外层遍历next vnode，内层遍历prev vnode
