Vue源码剖析(三)patch和Diff算法 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


Vue源码剖析(三)patch和Diff算法

2019-10-30 释然 前端及开发文章及欣赏


Patch和Diff算法
网上看了好多的博客和源码教程,感觉很多仔细的地方没有说清,而且在一些复杂的部分加了好多的描述,所以就想自己也写下心得, 方便自己, 方便他人,有兴趣的同学可以关注我的github里面有我之前一些博文 github/193Eric

我们知道的,在数据更改后,会触发getter,然后通过dep.notify()来通知watcher触发update进而更新视图,最终是通过Diff算法来对比新老Vnode的差异,并把差异更新到Dom视图上

Diff
我们知道的,Virtual DOM是一颗树,而diff算法主要把两颗树进行对比,找出之间的差异,来渲染页面

diff 算法是通过同层的树节点进行比较而非对树进行逐层搜索遍历的方式,所以时间复杂度只有 O(n),是一种相当高效的算法

1.调用patch函数比较Vnode和OldVnode,如果不一样直接return Vnode即将Vnode真实化后替换掉DOM中的节点

2.如果OldVnode和Vnode值得进一步比较则调用patchVnode方法进行进一步比较,分为以下几种情况:

Vnode有子节点,但是OldVnode没有,则将Vnode的子节点真实化后添加到真实DOM上

Vnode没有子节点,但是OldVnode上有,则将真实DOM上相应位置的节点删除掉

Vnode和OldVnode都有文本节点但是内容不一样,则将真实DOM上的文本节点替换为Vnode上的文本节点

Vnode和OldVnode上都有子节点,需要调用updateChildren函数进一步比较

updateChildren比较规则

提取出Vnode和OldVnode中的子节点分别为vCh和OldCh,并且提出各自的起始和结尾变量标记为 oldS oldE newS newE

如果是oldS和newE匹配上了,那么真实dom中的第一个节点会移到最后

如果是oldE和newS匹配上了,那么真实dom中的最后一个节点会移到最前,匹配上的两个指针向中间移动

如果都没有,在没有key的情况下直接在DOM的oldS位置的前面添加newS,同时newS+1。在有key的情况下会将newS和Oldch上的所有节点对比,如果有相同的则移动DOM并且将旧节点中这个位置置为null且newS+1。如果还没有则直接在DOM的oldS位置的前面添加newS且newS+1
直到出现任意一方的start>end,则有一方遍历结束,整个比较也结束

updateChildren例子:

假设:

真实dom为 A、B、C
oldDom为 A1、B1、C1
newDom为 A2、D2、C2、B2

先确定oldS = A1 ; oldE = C1; newS = A2; newE = B2

先对比oldS和newS,oldE和newE,发现oldS = newS 所以真实dom的A固定不动。排序为 A、B、C
然后oldS = B1 ; oldE = C1; newS = D2; newE = B2

对比发现 oldS = newE , 所以真实dom,B要插入到后面去

真实dom排序为:A、C、B

然后oldS = C1; oldE = C1; newS = D2; newE = B2

对比发现两两都不对等,所以走第三步。
假设有key存在,所以newS直接和oldDom里面的所有节点对比,发现没有存在,然后插入到oldS前面,且newS+1
真实dom排序为:A、D、C、B
然后重新开始,oldS++ > oldE-- ,结束了。

这就是updateChildren,之后就是一直遍历,运行updateChildren直到没有

标签: Vue源码剖析(三)patch和Diff算法 « 2020年UI界面设计趋势 | 一文秒懂 ajax, fetch, axios»


蓝蓝 http://www.bjhbys.com

  1. 帝皇彩票官网2019年10月(53)
  2. 2019年9月(48)
  3. 2019年8月(63)
  4. 2019年7月(59)
  5. 2019年6月(59)
  6. 2019年5月(31)
  7. 2019年4月(37)
  8. 2019年3月(43)
  9. 2019年2月(26)
  10. 2019年1月(45)
  11. 2018年12月(41)
  12. 2018年11月(40)
  13. 帝皇彩票官网2018年10月(29)
  14. 2018年9月(40)
  15. 帝皇彩票官网2018年8月(87)
  16. 2018年7月(107)
  17. 2018年6月(86)
  18. 2018年5月(110)
  19. 2018年4月(40)
  20. 2018年3月(35)
  21. 2017年8月(35)
  22. 2017年7月(45)
  23. 2017年6月(7)
  24. 2017年5月(27)
  25. 帝皇彩票官网2017年4月(51)
  26. 2017年3月(70)
  27. 2017年2月(65)
  28. 2017年1月(69)
  29. 2016年12月(55)
  30. 2016年11月(111)
  31. 2016年10月(92)
  32. 2016年9月(53)
  33. 2016年8月(9)
  34. 2016年7月(4)
  35. 2016年6月(9)
  36. 2016年3月(19)
  37. 2016年2月(26)
  38. 2016年1月(30)
  39. 2015年12月(33)
  40. 2015年11月(35)
  41. 帝皇彩票官网2015年10月(46)
  42. 2015年9月(43)
  43. 2015年8月(40)
  44. 2015年7月(33)
  45. 2015年6月(46)
  46. 2015年5月(58)
  47. 2015年4月(70)
  48. 2015年3月(55)
  49. 2015年2月(17)
  50. 2015年1月(33)
  51. 2014年12月(21)
  52. 2014年11月(84)
  53. 2014年10月(94)
  54. 2014年9月(6)
  55. 2014年8月(1)
  56. 2014年7月(13)
  57. 2014年6月(66)
  58. 2014年5月(99)
  59. 2014年4月(88)
  60. 2014年3月(102)
  61. 2014年2月(68)
  62. 2014年1月(83)
  63. 2013年12月(106)
  64. 2013年11月(112)
  65. 2013年10月(61)
  66. 2013年9月(20)
  67. 2013年7月(13)
  68. 2013年6月(27)
  69. 2013年5月(48)
  70. 2013年4月(39)
  71. 2013年3月(8)
  72. 2013年2月(20)
  73. 2013年1月(31)
  74. 2012年12月(33)
  75. 2012年11月(31)
  76. 2012年10月(23)
  77. 2012年9月(8)
  78. 2012年7月(14)
  79. 2012年6月(15)
  80. 2012年5月(31)
  81. 2012年4月(24)
  82. 2012年2月(4)
  83. 2012年1月(8)
  84. 2011年12月(35)
  85. 2011年11月(32)
  86. 2011年10月(13)
  87. 2011年8月(1)
  88. 2011年6月(1)
订阅Rss
状元彩票平台 山东十一运夺金开奖结果 吉利彩票登陆 博发彩票APP下载 大象彩票APP 状元彩票平台 状元彩票计划 吉利彩票开户 桔子彩票平台 大象彩票APP