11.vue的diff算法原理 |
您所在的位置:网站首页 › 前端diff算法 › 11.vue的diff算法原理 |
概念
vue基于虚拟dom做更新,核心是比较两个节点的差异,平级比较不考虑跨级比较,内部使用深度递归和双指针的方式进行比较 流程1.先比较是否是相同节点key tag 2.相同节点比较属性,并复用老节点 3.比较子节点,考虑老节点和新子节点的情况 老节点没有子节点,现有子节点,直接插入新的子节点 老节点有子节点,现没有子节点,直接删除新的子节点 老子节点是文本,现子节点也是文本,直接更新文本节点 老的子节点是列表,新的子节点也是列表,更新子节点4.优化比较 vue2里面的diff算法优化 头头指针比较 尾尾指针比较 头尾指针比较 尾头指针比较 乱序创建映射进行比较 5.比对查找进行复用 vue3采用最长递增子序列来实现diff优化 vue2是映射比较,vue3是直接把子序列的AQ节点不移动,直接插入E节点进行优化 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |