Vue中的 DOM与Diff详情_vue.js_

// src/lifecycle.js Vue.prototype._update = function (vNode) { const vm = this; const preVNode = vm._vNode; vm._vNode = vNode; if (!preVNode) { // 首次渲染，没有前一次的虚拟节点 vm.$el = patch(vm.$el, vNode); } else { // vm._vNode中存储了前一次的虚拟节点，进行dom diff patch(preVNode, vNode); } };

const vm1 = new Vue(); const html1 = ` 
 111 
 `; // 将模板编译为render函数 const render1 = compileToFunctions(html1); const vNode1 = render1.call(vm1); // 当oldVNode为DOM元素时，会用新节点直接替换老节点 patch(document.getElementById('app'), vNode1); const html2 = `  333  `; // 将新的模本编译为render函数 const render2 = compileToFunctions(html2); // 生成新的虚拟节点 const vNode2 = render2.call(vm1); // 老节点和新节点进行对比 patch(vNode1, vNode2);

export function patch (oldVNode, vNode) { if (oldVNode.nodeType) { // 旧的节点为真实节点 // some code... } else { // 新旧节点都为虚拟节点，要进行dom diff if (oldVNode.tag !== vNode.tag) { // 标签不相同，直接用新节点替换老节点 const newEle = createElement(vNode); replaceChild(newEle, oldVNode.el); return newEle; } } }

// 老的模板 const html1 = ` 
 111 
 `; // 新的模板 const html2 = ` 
 333 
 `;

export function patch (oldVNode, vNode) { if (oldVNode.nodeType) { // 旧的节点为真实节点 // some code ... } else { // 新旧节点都为虚拟节点，要进行dom diff if (oldVNode.tag !== vNode.tag) { // 不相等直接替换 // some code ... } if (!oldVNode.tag) { // 文本节点,tag相同，都为undefined oldVNode.el.textContent = vNode.text; return oldVNode.el; } } }

function updateProperties (vNode, oldProps = {}) { // 老节点和新节点的属性 const { el, props } = vNode; // 用新节点替换老节点中的属性 for (const key in props) { // 为真实DOM设置新节点的所有属性 if (props.hasOwnProperty(key)) { const value = props[key]; if (key === 'style') { for (const styleKey in value) { if (value.hasOwnProperty(styleKey)) { el.style[styleKey] = value[styleKey]; } } } else { el.setAttribute(key, value); } } } // 如果老节点中有，而新节点中没有，需要将其删除 for (const key in oldProps) { if (oldProps.hasOwnProperty(key) && !props.hasOwnProperty(key)) { el.removeAttribute(key); } } const style = oldProps.style || {}; const newStyle = props.style || {}; // 删除老节点中多余的样式 for (const key in style) { if (!newStyle.hasOwnProperty(key) && style.hasOwnProperty(key)) { el.style[key] = ''; } } }

export function patch (oldVNode, vNode) { if (oldVNode.nodeType) { // 旧的节点为真实节点 // some code ... } else { // 新旧节点都为虚拟节点，要进行dom diff // 元素相同，需要比较子元素 const el = vNode.el = oldVNode.el; // 更新属性 updateProperties(vNode, oldVNode.props); const oldChildren = oldVNode.children; const newChildren = vNode.children; // 老的有，新的没有，将老的设置为空 // 老的没有，新的有，为老节点插入多有的新节点 // 老的和新的都有,遍历每一个进行比对 if (!oldChildren.length && newChildren.length) { for (let i = 0; i < newChildren; i++) { const child = newChildren[i]; el.appendChild(createElement(child)); } return; } if (oldChildren.length && !newChildren.length) { return el.innerHTML = ''; } if (oldChildren.length && newChildren.length) { updateChildren(oldChildren, newChildren, el); } return el; } }

function updateChildren (oldChildren, newChildren, parent) { let oldStartIndex = 0, // 老孩子的开始索引 oldStartVNode = oldChildren[0], // 老孩子的头虚拟节点 oldEndIndex = oldChildren.length - 1, // 老孩子的尾索引 oldEndVNode = oldChildren[oldEndIndex]; // 老孩子的尾虚拟节点 let newStartIndex = 0, // 新孩子的开始索引 newStartVNode = newChildren[0], // 新孩子的头虚拟节点 newEndIndex = newChildren.length - 1, // 新孩子的尾索引 newEndVNode = newChildren[newEndIndex]; // 新孩子的尾虚拟节点 }

function isSameVNode (oldVNode, newVNode) { return oldVNode.key === newVNode.key && oldVNode.tag === newVNode.tag; }

const template1 = ` 
A
B
C
D
 `; const template2 = ` 
A
B
C
D
E
 `; 

function updateChildren (oldChildren, newChildren, parent) { while (oldStartIndex <= oldEndIndex && newStartIndex <= newEndIndex) { if (isSameVNode(oldStartIndex, newStartIndex)) { // 头和头相等 // 1. 可能是文本节点：需要继续比对文本节点 // 2. 可能是元素：先比对元素的属性，然后再比对子节点 patch(oldStartVNode, newStartVNode); oldStartVNode = oldChildren[++oldStartIndex]; newStartVNode = newChildren[++newStartIndex]; } } // 新节点中剩余元素插入到真实节点中 for (let i = newStartIndex; i <= newEndIndex; i++) { const child = newChildren[i]; const refEle = oldChildren[oldEndIndex + 1] || null; parent.insertBefore(createElement(child), refEle); } }

const template1 = ` 
A
B
C
D
 `; const template2 = ` 
E
A
B
C
D
 `;