一文详解Vue3中简单diff算法的实现_vue.js_

// 旧节点 const oldVNode = { type: 'div', children: [ { type: 'p', children: '1' }, { type: 'p', children: '2' }, { type: 'p', children: '3' } ] } // 新节点 const newVNode = { type: 'div', children: [ { type: 'p', children: '4' }, { type: 'p', children: '5' }, { type: 'p', children: '6' } ] }

function easyDiff (n1, n2, container) { // 取出新旧子节点列表 const oldChildren = n1.children const newChildren = n2.children // 获取新旧子节点列表的长度 const oldLen = oldChildren.length const newLen = newChildren.length // 取得较小的一个（可以理解为两组子节点的公共长度） const commonLength = Math.min(oldLen, newLen) // 遍历 commonLength 次 for (let i = 0; i < commonLength; i++) { patch(oldChildren[i], newChildren[i], container) } // 如果 newLen > oldLen，说明有新子节点需要挂载 if (newLen > oldLen) { for (let i = commonLength; i < newLen; i++) { patch(null, newChildren[i], container) } } // 如果 oldLen > newLen，说明有旧节点需要卸载 if (oldLen > newLen) { for (let i = commonLength; i < oldLen; i++) { unmount(oldChildren[i]) } } }

const KEY = { oldVNode: [ { type: 'p' }, { type: 'div' }, { type: 'span' } ], newVNode: [ { type: 'span' }, { type: 'p' }, { type: 'div' } ] } 

 oldChildren: [ { type: 'p', children: '1' }, { type: 'p', children: '2' }, { type: 'p', children: '3' } ], newChildren: [ { type: 'p', children: '3' }, { type: 'p', children: '1' }, { type: 'p', children: '2' } ]

const KEY = { oldChildren: [ { type: 'p', children: '1', key: '1' }, { type: 'p', children: '2', key: '2' }, { type: 'p', children: '3', key: '3' } ], newChildren: [ { type: 'p', children: '3', key: '3' }, { type: 'p', children: '1', key: '1' }, { type: 'p', children: '2', key: '2' } ] }

oldVNode: { type: 'p', children: 'text - 1', key: '1' } newVNode: { type: 'p', children: 'text - 2', key: '1' } 

function easyDiffV2 (n1, n2, container) { // 取出新旧子节点列表 const oldChildren = n1.children const newChildren = n2.children // 遍历新的children for (let i = 0; i < newChildren.length; i++) { const newVNode = newChildren[i] for (let j = 0; j < oldChildren.length; j++) { const oldVNode = oldChildren[i] // 如果找到可复用的两个节点 if (newVNode.key === oldVNode.key) { // 对可复用的两个节点打补丁 patch(oldVNode, newVNode, container) // 一个新节点处理完后开始下一个新节点 break } } } }

function easyBigIndex (n1, n2, container) { // 取出新旧子节点列表 const oldChildren = n1.children const newChildren = n2.children // 用来存储寻找过程中遇到的最大索引值 let lastIndex = 0 for (let i = 0; i < newChildren.length; i++) { const newVNode = newChildren[i] for (let j = 0; j < oldChildren; j++) { const oldVNode = oldChildren[j] if (newVNode.key === oldVNode.key) { patch(oldVNode, newVNode, container) if (j < lastIndex) { // 需要移动 } else { // 更新lastIndex的值（lastIndex要保持当前已查找的索引中的最大值） lastIndex = j } break } } } }

function easyMove (n1, n2, container) { // 取出新旧子节点列表 const oldChildren = n1.children const newChildren = n2.children // 用来存储寻找过程中遇到的最大索引值 let lastIndex = 0 for (let i = 0; i < newChildren.length; i++) { const newVNode = newChildren[i] for (let j = 0; j < oldChildren; j++) { const oldVNode = oldChildren[j] if (newVNode.key === oldVNode.key) { patch(oldVNode, newVNode, container) if (j < lastIndex) { // 需要移动 // 获取当前vNode的前一个v
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：JS函数(普通函数,箭头函数)中this的指向问题详解_javascript技巧_
                                                                
下一篇：Vue3 diff算法之双端diff算法详解_vue.js_