>[success] # dom 操作 ~~~ 1.有了虛擬dom，下面就是將虛擬的dom轉換成真實節點，這個步驟拆分 成'創建dom'，'生成dom屬性'，'比較新老虛擬dom來決定那些dom需要重新渲染' ~~~ >[info] ## 創建dom 和 創建dom屬性代碼 ~~~ 1.先定義一個'render' 函數，他做的很簡單將虛擬dom生成的dom節點插入 到他對應的父節點中 2.'createElm' 創建dom，將虛擬dom轉換成真實dom，這里面我們沒有 像'snabbdom'做的那么復雜，只是單純判斷兩點，有標簽可以創建成標簽 的dom，和沒有標簽只能創建文本類型dom 2.1.之前分析過children 和text 不能共存的，所以還要在帶標簽類型的 dom且含有children子元素需要遞歸接著往下處理創建dom 3.'updateProperties',將虛擬dom創建時候定義的props 屬性也就是dom節點 的屬性要賦值到dom上這里用的就是'updateProperties' 方法 ~~~ ~~~ /* 將虛擬dom 渲染到頁面上成為真實dom @params container 是一個真實dom， 用來指定虛擬dom 轉成 真實dom 要插入的位置，理解成是父容器的位置 @params vnode 虛擬dom 對象 */ export function render(vnode, container) { let el = createElm(vnode) container.appendChild(el) // 將虛擬dom對象轉換成的真實dom 插入對應的父節點中 } // 將虛擬dom轉換成真實dom function createElm(vnode) { let { tag, children, key, props, text } = vnode // 判斷虛擬dom 是文本還是普通標簽 if (typeof tag === 'string') { // 存在tag 說明是一個dom 節點，要注意文本節點 // 我們在創建的時候tag 是undefind 所以可以簡單認為有tag就是一個dom // 通過虛擬dom也就是h函數返回的createEle對象，里面的tag參數來生成一個dom標簽 vnode.el = document.createElement(tag) // 創建完dom 也要對dom上的屬性進行處理例如class style 這些 updateProperties(vnode); // 如果有children 這是后需要遞歸層級創建每一個h函數返回createEle對象對應的dom標簽 children.forEach(child => { // child 是虛擬節點 render(child, vnode.el) // 讓這些虛擬節點形成嵌套傳入他們的父節點dom對象形成遞歸 }) } else { vnode.el = document.createTextNode(text) // 創建文本標簽 } return vnode.el } // 更新的時候是新老的比較，第一次時候默認老的是空 function updateProperties(vnode, oldProps = {}) { // 獲取當前vnode虛擬節點上該節點的所有屬性 let newProps = vnode.props // 獲取要加這些屬性的 dom 節點對象 let el = vnode.el // ------------------------------------------- // 后續會存在新老的虛擬dom節點比較，因此我們也需要比較看看 // 新老變化后那些dom 屬性刪除了，這樣只需要操作針對變化屬性即可 // 同樣這里要考慮的是style 和其他屬性，因為style比較特殊 let newStyle = newProps.style || {}; let oldStyle = oldProps.style || {}; // 循環老的屬性不在新的屬性中存在說明被刪除了 for (let key in oldStyle) { if (!newStyle[key]) { el.style[key] = '' } } // 如果下次更新時 我應該用新的屬性 來更新老的節點 // 如果老的中有屬性 新的中沒有 for (let key in oldProps) { if (!newProps[key]) { delete el[key]; // 如果新的中沒有這個屬性了 那就直接刪除掉dom上的這個屬性 } } // ------------------------------------------- // 循環這個在虛擬dom定義的對象并且依次賦值到dom節點上 for (let key in newProps) { if (key === 'style') { // 如果是style的話 需要再次遍歷添加 for (let styleName in newProps.style) { // {color:red} // el.style.color = 'red' el.style[styleName] = newProps.style[styleName] } } else if (key === 'class') { el.className = newProps.class } else { // 給這個元素添加屬性 值就是對應的值 el[key] = newProps[key] } } } ~~~ >[info] ## patch 方法 -- 核心地方 比較新老虛擬dom ~~~ 1.上面操作已經將虛擬dom 轉成真實dom，并且利用render 函數將這些轉換后的真實dom插入到指定 dom節點中 2.patch,意為'補丁'，即指對舊的VNode修補，打補丁從而得到新的VNode，這個過程就是我們經常聽到 'dom-diff',舉個例子同樣的數據'A,B,C,D' 在第一次時候渲染上了頁面，這個時候數據更新變成'A,B,C,D,E' ,肉眼一目了然只是多了一個'E'那么問題來了'A,B,C' 還需要重新dom渲染么？vue這里給的答案是否定的 我們只需要比較'A,B,C,D' (叫做oldVnode)和 'A,B,C,D,E'(叫做newVnode)，哪里不同改哪里，相同的完全不用 管 3.思路現在有了先從節點比較考慮 3.1.新老虛擬dom的標簽不一樣，這種情況就默認是整個節點內容都變了直接操作dom，將新老節點替換 3.2.如果比較的虛擬dom 沒有tag屬性，那么他就是文本節點，需要比較新老文本節點內容是否一樣，不一樣 以新的節點內容為準 3.3.不是文本，并且我們的標簽是一樣的,這時候需要考慮節點上的屬性，要將新的節點屬性重新賦值在 現在的dom節點上也就需要調用'updateProperties' 3.4.之前說過除了文本節點，就是嵌套層級節點這時候就是要考慮的 3.4.1.老虛擬dom 和 新的虛擬dom 都有孩子 這種比較復雜了 3.4.2.老的有新的沒有，直接干掉老的就好 3.4.2.老的沒有，新的有直接就把新的依次加進去就好 4.如圖，在層級比較的時候最優的方式就是，逐層級比較 ~~~  ~~~ export function patch(oldVnode,newVnode){ // 1) 先比對 標簽一樣不一樣 if(oldVnode.tag !== newVnode.tag){ // 以前是div 現在是p標簽 // 必須拿到當前元素的父親 才能替換掉自己 oldVnode.el.parentNode.replaceChild(createElm(newVnode),oldVnode.el) } // 2) 比較文本了 標簽一樣 可能都是undefined if(!oldVnode.tag){ if(oldVnode.text !== newVnode.text){ // 如果內容不一致直接根據當前新的元素中的內容來替換到文本節點 oldVnode.el.textContent = newVnode.text; } } // 標簽一樣 可能屬性不一樣了 let el = newVnode.el = oldVnode.el; // 標簽一樣復用即可 updateProperties(newVnode,oldVnode.props); // 做屬性的比對 // 必須要有一個根節點 // 比較孩子 let oldChildren = oldVnode.children || []; let newChildren = newVnode.children || []; // 老的有孩子 新的有孩子 updateChildren if(oldChildren.length > 0 && newChildren.length > 0){ updateChildren(el,oldChildren,newChildren); // 不停的遞歸比較 }else if(oldChildren.length > 0){ // 老的有孩子 新的沒孩子 el.innerHTML = '' }else if(newChildren.length > 0){ // 老的沒孩子 新的有孩子 for(let i = 0; i < newChildren.length ;i++){ let child = newChildren[i]; el.appendChild(createElm(child)); // 將當前新的兒子 丟到老的節點中即可 } } return el; } ~~~ >[info] ## updateChildren -- 比較新老子集比較 ~~~ 1.老虛擬dom 和 新的虛擬dom 都有孩子 這種比較復雜了，最先想到的方式就是兩個子集雙重for 循環自然 產生的問題也是效率，在vue采用的是指針的形式，將涉及到的情況列出來，然后通過指針的形式進行 新老的比較 2.存在的幾種情況分析 2.1.新老比較發現只是在末尾插入新的節點內容 2.2.新老比較發現只是在頭部插入新的節點內容 2.3.新老比較發現內容只是倒敘 2.4.新老比較發現只是將尾部的部分元素變成了頭部 2.5.整個排序是沒有規律的 ~~~  ~~~ function isSameVnode(oldVnode, newVnode) { // 如果兩個人的標簽和key 一樣我認為是同一個節點 虛擬節點一樣我就可以復用真實節點了 return (oldVnode.tag === newVnode.tag) && (oldVnode.key === newVnode.key) } function updateChildren(parent, oldChildren, newChildren) { // ------------------老children數組-------------------- let oldStartIndex = 0 // 老節點的初始位置 let oldStartVnode = oldChildren[0] // 老節點數組開始節點的值 let oldEndIndex = oldChildren.length - 1 // 老節點末尾的位置 let oldEndVnode = oldChildren[oldEndIndex] // 老節點數組末尾節點的值 // ------------------新的children數組-------------------- let newStartIndex = 0 // 新節點初始位置 let newStartVnode = newChildren[0] // 新節點開始節點的值 let newEndIndex = newChildren.length - 1 // 新節點末尾的值 let newEndVnode = newChildren[newEndIndex] // 新節點數組末尾的值 // ------------------------------------------------------------ function makeIndexByKey(children) { // 為亂序的情況準備，看老節點有沒有能復用的節點 let map = {}; children.forEach((item, index) => { map[item.key] = index }); return map; // {a:0,b:1...} } let map = makeIndexByKey(oldChildren); // // 采用指針的方式 單層循環 替代for 雙層循環 while (oldStartIndex <= oldEndIndex && newStartIndex <= newEndIndex) { // 依次按順序比較每個節點是否相同 依次比較為了向后插入 if (isSameVnode(oldStartVnode, newStartVnode)) { patch(oldStartVnode, newStartVnode); // 比較新老屬性 節點中的值遞歸比較里面的孩子 oldStartVnode = oldChildren[++oldStartIndex]; newStartVnode = newChildren[++newStartIndex]; } else if (isSameVnode(oldEndVnode, newEndVnode)) { // 向前插入的情況做判斷 從后往前判斷 patch(oldEndVnode, newEndVnode) oldEndVnode = oldChildren[--oldEndIndex] newEndVnode = newChildren[--newEndIndex] } else if (isSameVnode(oldStartVnode, newEndVnode)) { // 倒敘 patch(oldStartVnode, newEndVnode); parent.insertBefore(oldStartVnode.el, oldEndVnode.el.nextSibling); oldStartVnode = oldChildren[++oldStartIndex]; newEndVnode = newChildren[--newEndIndex] } else if (isSameVnode(oldEndVnode, newStartVnode)) { // 將尾部插入頭部 patch(oldEndVnode, newStartVnode); parent.insertBefore(oldEndVnode.el, oldStartVnode.el); oldEndVnode = oldChildren[--oldEndIndex]; newStartVnode = newChildren[++newStartIndex] } else { // 亂序 // 會先拿新節點的第一項 去老節點中匹配，如果匹配不到直接將這個節點插入到老節點開頭的前面，如果能查找到則直接移動老節點 let moveIndex = map[newStartVnode.key]; if (moveIndex == undefined) { parent.insertBefore(createElm(newStartVnode), oldStartVnode.el); } else { // 我要移動這個元素 let moveVnode = oldChildren[moveIndex]; oldChildren[moveIndex] = undefined; parent.insertBefore(moveVnode.el, oldStartVnode.el); patch(moveVnode, newStartVnode); } // 要將新節點的指針向后移動 newStartVnode = newChildren[++newStartIndex] } } if (newStartIndex <= newEndIndex) { // 如果到最后還剩余 需要將剩余的插入，針對前插和后插 for (let i = newStartIndex; i <= newEndIndex; i++) { // 要插入的元素 let ele = newChildren[newEndIndex + 1] == null ? null : newChildren[newEndIndex + 1].el; parent.insertBefore(createElm(newChildren[i]), ele); } } if (oldStartIndex <= oldEndIndex) { // 可能老節點中還有剩余 則直接刪除老節點中剩余的屬性針對亂序 for (let i = oldStartIndex; i <= oldEndIndex; i++) { let child = oldChildren[i]; if (child != undefined) { parent.removeChild(child.el) } } } } ~~~ >[danger] ##### v-for 為什么最好不用索引