dom操作 — patch.js

>[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 为什么最好不用索引