Vue3虚拟DOM和patch算法

  1. dynamicChildren:标签内部动态子节点
    dynamicProps标记的动态属性

  2. Children可能是文本可能是数组,相比vue2少了text

  3. type vue2中是字符串, vue3中可能是对象

patch源码太多了这里就不去粘贴了 想看的小伙伴可以去GitHub或者自己下载去看对应的文件即可

初始化过程为mount => render => patch 然后根据 shapFlags去做递归操作
初始化patch会hostCreatElement

    // 1. sync from start  找开头
    // (a b) c
    // (a b) d e

    // 2. sync from end  找结尾
    // a (b c)
    // d e (b c)

    // 通用序列增加
    // 3. common sequence + mount   创建
    // (a b)
    // (a b) c
    // i = 2, e1 = 1, e2 = 2
    // (a b)
    // c (a b)
    // i = 0, e1 = -1, e2 = 0

   // 4. common sequence + unmount  删除
    // (a b) c
    // (a b)
    // i = 2, e1 = 2, e2 = 1
    // a (b c)
    // (b c)
    // i = 0, e1 = 0, e2 = -1

  // 最长递增子序列
   // 5. unknown sequence
    // [i ... e1 + 1]: a b [c d e] f g
    // [i ... e2 + 1]: a b [e d c h] f g
    // i = 2, e1 = 4, e2 = 5

  1. 新的节点去老的里边找,是否存在
  2. 找到做更新,没找到 创建
  3. 移动和创建 //  最长递增子序列

你可能感兴趣的:(Vue3虚拟DOM和patch算法)