虚拟的DOM与DOM diff

本篇LIST

关于DOM的谣言
虚拟DOM优点
虚拟DOM是什么样子的
如何创建虚拟DOM
创建虚拟DOM的方便方法
虚拟DOM是什么，虚拟DOM优点，缺点
diff的实现基本思路
小结

1.关于DOM的谣言

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200911223545752.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70#pic_center)

2.虚拟DOM优点

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200911223725281.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70#pic_center)

3.虚拟DOM是什么样子的

react

![在这里插入图片描述]( https://img-blog.csdnimg.cn/202009112237513.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70#pic_center)

vue

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200911223912752.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70#pic_center)

4.如何创建虚拟DOM

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200911224047640.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70#pic_center)

5.创建虚拟DOM的方便方法

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200911224128327.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70#pic_center)

6.虚拟DOM是什么，虚拟DOM优点，缺点

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200911224201751.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70#pic_center)

7.diff的实现基本思路

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200911224244400.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200911224249678.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg,size_16,color_FFFFFF,t_70#pic_center)

8.小结

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200911224316189.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70#pic_center)

posted @ 2020-09-11 22:44  jacksonni  阅读(218)  评论(0)    收藏  举报