只为了 演示 一下Vue的patch算法
这个patch算法 也就是Vue的虚拟dam渲染成真正dom的流程
首先:初始化patch(container,vnode)
function createdElement(vnode) {
let tag = vnode.tag //要渲染的目标元素
let attrs = vnode.attrs || {} //要添加的属性 没有为空{}
let children = vnode.children || [] //要渲染的元素的子节点
if (!tag) {
return null;//如果没有要渲染的目标元素 就不渲染
}
//以上都没问题 就进行对应dom的创建
let elem = document.createElement(tag) //创建dom
let attrName;
//给dom添加属性
for (attrName in attrs) {
if (attrs.hasOwnProperty(attrName)) { //如果要添加的属性中 有这个属性
//class
elem.setAttribute(attrName, attrs[attrName])
}
}
//3.将子元素添加到目标之上
children.forEach(function (childVnode) {
elem.appendChild(createdElement(childVnode)) //如果 目标节点 有子元素 我们可以这样 往里面添加子元素
})
//以上 就进行了dom的初始化
return elem //这样 我们就创建了这个元素
}
我们现在做的只是 一个 vue的Patch的思路梳理 不代表真正的代码实现
接下来 在理解一下 diff算法的一个更新思路
function updatedChildren(vnode, newVnode) {
let children = vnode.children || [] //现有节点
let newChildren = newVnode.children || [] //新节点
children.forEach(function (childrenVnode, index) {
//循环每一项
let newChildrenVnode = newChildren[index]
//第一层没有变化
if (childrenVnode.tag === newChildrenVnode.tag) {
updatedChildren(childrenVnode, newChildrenVnode) //如果第一层相同 继续调用查看第二层 =>递归
} else {
//两者的tag不一样
replaceNode(childrenVnode, newChildrenVnode) //内容不一样 则进行替换 这公式都是假的 理解思路为上
}
})
}