Vue源码学习(十四):diff算法(一)patch比对
好家伙，
本篇将会解释要以下效果的实现
1.目标
我们要实现以下元素替换的效果
gif:
以上例子的代码:
//创建vnode
let vm1 = new Vue({data:{name:'张三'}})
let render1 = compileToFunction(`<a>{{name}}</a>`)
let vnode1 = render1.call(vm1)
document.body.appendChild(createELm(vnode1))
//数据更新
let vm2 = new Vue({data:{name:'李四'}})
let render2 = compileToFunction(`<div>{{name}}</div>`)
let vnode2 = render2.call(vm2)
//属性添加
let vm3 = new Vue({data:{name:'李四'}})
let render3 = compileToFunction(`<div style="color:red">{{name}}</div>`)
let vnode3 = render3.call(vm3)
//patch 比对
setTimeout(()=>{
patch(vnode1,vnode2)
},2000)
setTimeout(()=>{
patch(vnode2,vnode3)
},3000)
以上例子中compileToFunction()方法的详细解释
Vue源码学习(四):<templete>渲染第三步,将ast语法树转换为渲染函数
一句话解释,这是一个将模板变为render函数的方法
开搞:
思路非常简单,依旧是对不同的情况分类处理
2.代码解释
patch.js
export function patch(oldVnode, Vnode) {
//原则 将虚拟节点转换成真实的节点
console.log(oldVnode, Vnode)
console.log(oldVnode.nodeType)
console.log(Vnode.nodeType)
//第一次渲染 oldVnode 是一个真实的DOM
//判断ldVnode.nodeType是否唯一,意思就是判断oldVnode是否为属性节点
if (oldVnode.nodeType === 1) {
console.log(oldVnode, Vnode) //注意oldVnode 需要在加载 mount 添加上去 vm.$el= el
let el = createELm(Vnode) // 产生一个新的DOM
let parentElm = oldVnode.parentNode //获取老元素（app） 父亲 ，body
// console.log(oldVnode)
// console.log(parentElm)
parentElm.insertBefore(el, oldVnode.nextSibling) //当前真实的元素插入到app 的后面
parentElm.removeChild(oldVnode) //删除老节点
//重新赋值
return el
}else{ // diff
console.log(oldVnode.nodeType)
console.log(oldVnode, Vnode)
//1 元素不是一样
if(oldVnode.tag!==Vnode.tag){
//旧的元素 直接替换为新的元素
return oldVnode.el.parentNode.replaceChild(createELm(Vnode),oldVnode.el)
}
//2 标签一样 text 属性 <div>1</div> <div>2</div> tag:undefined
if(!oldVnode.tag){
if(oldVnode.text !==Vnode.text){
return oldVnode.el.textContent = Vnode.text
}
}
//2.1属性 (标签一样) <div id='a'>1</div> <div style>2</div>
//在updataRpors方法中处理
//方法 1直接复制
let el = Vnode.el = oldVnode.el
updataRpors(Vnode,oldVnode.data)
//diff子元素 <div>1</div> <div></div>
let oldChildren = oldVnode.children || []
let newChildren = Vnode.children || []
if(oldChildren.length>0&&newChildren.length>0){ //老的有儿子 新有儿子
//创建方法
updataChild(oldChildren,newChildren,el)
}else if(oldChildren.length>0&&newChildren.length<=0){//老的元素 有儿子 新的没有儿子
el.innerHTML = ''
}else if(newChildren.length>0&&oldChildren.length<=0){//老没有儿子 新的有儿子
for(let i = 0;i<newChildren.length;i++){
let child = newChildren[i]
//添加到真实DOM
el.appendChild(createELm(child))
}
}
}
}
function updataChild (oldChildren,ewChildren,el){
}
//添加属性
function updataRpors(vnode,oldProps={}){ //第一次
let newProps = vnode.data ||{} //获取当前新节点 的属性
let el = vnode.el //获取当前真实节点 {}
//1老的有属性，新没有属性
for(let key in oldProps){
if(!newProps[key]){
//删除属性
el.removeAttribute[key] //
}
}
//2演示 老的 style={color:red} 新的 style="{background:red}"
let newStyle = newProps.style ||{} //获取新的样式
let oldStyle = oldProps.style ||{} //老的
for(let key in oldStyle){
if(!newStyle[key]){
el.style =''
}
}
//新的
for(let key in newProps){
if(key ==="style"){
for(let styleName in newProps.style){
el.style[styleName] = newProps.style[styleName]
}
}else if( key ==='class'){
el.className = newProps.class
}else{
el.setAttribute(key,newProps[key])
}
}
}
//vnode 变成真实的Dom
export function createELm(vnode) {
let { tag, children, key, data, text } = vnode
//注意
if (typeof tag === 'string') { //创建元素 放到 vnode.el上
vnode.el = document.createElement(tag) //创建元素
updataRpors(vnode)
//有儿子
children.forEach(child => {
// 递归 儿子 将儿子渲染后的结果放到 父亲中
vnode.el.appendChild(createELm(child))
})
} else { //文本
vnode.el = document.createTextNode(text)
}
return vnode.el //新的dom
}
三个方法,我们一个个看
2.1.patch()
export function patch(oldVnode, Vnode) {
//原则 将虚拟节点转换成真实的节点
console.log(oldVnode, Vnode)
console.log(oldVnode.nodeType)
console.log(Vnode.nodeType)
//第一次渲染 oldVnode 是一个真实的DOM
//判断ldVnode.nodeType是否唯一,意思就是判断oldVnode是否为属性节点
if (oldVnode.nodeType === 1) {
console.log(oldVnode, Vnode) //注意oldVnode 需要在加载 mount 添加上去 vm.$el= el
let el = createELm(Vnode) // 产生一个新的DOM
let parentElm = oldVnode.parentNode //获取老元素（app） 父亲 ，body
// console.log(oldVnode)
// console.log(parentElm)
parentElm.insertBefore(el, oldVnode.nextSibling) //当前真实的元素插入到app 的后面
parentElm.removeChild(oldVnode) //删除老节点
//重新赋值
return el
}else{ // diff
console.log(oldVnode.nodeType)
console.log(oldVnode, Vnode)
//1 元素不是一样
if(oldVnode.tag!==Vnode.tag){
//旧的元素 直接替换为新的元素
return oldVnode.el.parentNode.replaceChild(createELm(Vnode),oldVnode.el)
}
//2 标签一样 text 属性 <div>1</div> <div>2</div> tag:undefined
if(!oldVnode.tag){
if(oldVnode.text !==Vnode.text){
return oldVnode.el.textContent = Vnode.text
}
}
//2.1属性 (标签一样) <div id='a'>1</div> <div style>2</div>
//在updataRpors方法中处理
//方法 1直接复制
let el = Vnode.el = oldVnode.el
updataRpors(Vnode,oldVnode.data)
//diff子元素 <div>1</div> <div></div>
let oldChildren = oldVnode.children || []
let newChildren = Vnode.children || []
if(oldChildren.length>0&&newChildren.length>0){ //老的有儿子 新有儿子
//创建方法
updataChild(oldChildren,newChildren,el)
}else if(oldChildren.length>0&&newChildren.length<=0){//老的元素 有儿子 新的没有儿子
el.innerHTML = ''
}else if(newChildren.length>0&&oldChildren.length<=0){//老没有儿子 新的有儿子
for(let i = 0;i<newChildren.length;i++){
let child = newChildren[i]
//添加到真实DOM
el.appendChild(createELm(child))
}
}
}
}
patch()方法用于根据新的虚拟节点更新旧的虚拟节点以及对应的真实 DOM 元素。
首先判断旧的虚拟节点是否是一个真实 DOM 元素（即是否为属性节点），
--1--如果是，则表示这是第一次渲染，需要使用 createELm 函数创建新的 DOM 元素，并将其插入到旧的元素之前，最后再删除旧的元素，返回新创建的元素。
--2--如果不是第一次渲染，则进行 diff 操作，
--2.1--首先判断新老节点的标签是否相同，如果不同，则直接使用新的节点替换旧的节点。
--2.2--如果标签相同，则需要判断节点的文本内容和属性是否发生了变化，如果发生了变化，则通过 updataRpors 函数更新 DOM 元素属性或文本内容。
--2.3--最后，需要 diff 子元素。
--2.3.1--如果旧节点和新节点均有子元素，则需要将新旧子元素进行比较，通过 updataChild 函数更新旧节点的子元素与新节点的子元素。
--2.3.2--如果旧节点有子元素而新节点没有，则直接将旧节点的内容清空；
--2.3.3--如果新节点有子元素而旧节点没有，则直接将新节点的子元素添加到旧节点中。
2.2.updataRpors()
//添加属性
function updataRpors(vnode,oldProps={}){ //第一次
let newProps = vnode.data ||{} //获取当前新节点 的属性
let el = vnode.el //获取当前真实节点 {}
//1老的有属性，新没有属性
for(let key in oldProps){
if(!newProps[key]){
//删除属性
el.removeAttribute[key] //
}
}
//2演示 老的 style={color:red} 新的 style="{background:red}"
let newStyle = newProps.style ||{} //获取新的样式
let oldStyle = oldProps.style ||{} //老的
for(let key in oldStyle){
if(!newStyle[key]){
el.style =''
}
}
//新的
for(let key in newProps){
if(key ==="style"){
for(let styleName in newProps.style){
el.style[styleName] = newProps.style[styleName]
}
}else if( key ==='class'){
el.className = newProps.class
}else{
el.setAttribute(key,newProps[key])
}
}
}
updataRpors()是一个更新属性的方法,其主要功能是更新虚拟节点的属性，包括删除不再存在的属性、更新样式和类名等。
2.3.createELm()
//vnode 变成真实的Dom
export function createELm(vnode) {
let { tag, children, key, data, text } = vnode
//注意
if (typeof tag === 'string') { //创建元素 放到 vnode.el上
vnode.el = document.createElement(tag) //创建元素
updataRpors(vnode)
//有儿子
children.forEach(child => {
// 递归 儿子 将儿子渲染后的结果放到 父亲中
vnode.el.appendChild(createELm(child))
})
} else { //文本
vnode.el = document.createTextNode(text)
}
return vnode.el //新的dom
}
createELm()是一个用于创建和渲染虚拟DOM的函数.
函数名称为`createELm`，它接收一个参数`vnode`，这个参数是一个虚拟DOM节点对象。
这段代码的主要作用是根据传入的虚拟DOM节点数据结构（`vnode`）创建一个相应的实际DOM元素，并返回该元素。
如果虚拟DOM节点包含子节点，它会递归地为每个子节点创建相应的DOM元素并添加到父节点的DOM元素中。
