Vue的patch算法（了解）

只为了 演示 一下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)   //内容不一样 则进行替换   这公式都是假的  理解思路为上
        }
    })
}