vue2源码-七、虚拟DOM转化为真实DOM

虚拟DOM转化为真实DOM

1. vnode虚拟节点创建真实节点，主要有以下几步：

   • Vue原型方法_update的扩展。
   • patch方法：既有初始化的功能又有更新的逻辑。
   • createElm方法：根据虚拟节点创建真实节点。

2. _update方法：

     // 将vnode转化为真实dom
     Vue.prototype._update = function (vnode) {
       const vm = this;
       const el = vm.$el;
       // patch既有初始化的功能又有更新的逻辑
       vm.$el = patch(el, vnode);
     };
   

3. _patch方法

   这个方法既有初始化又有更新的逻辑。

   function patch(oldVNode, vnode) {
     // 写的是渲染流程
     // 获取老节点的类型
     const isRealElenment = oldVNode.nodeType;
     if (isRealElenment) { 
       const elm = oldVNode;
       // 1. 根据虚拟节点创建真实节点
       let newElm = createEle(vnode);
       // 2. 使用真实节点替换掉老节点
       const parentElm = elm.parentNode; // 拿到父元素
      	// 将新节点newElm插入到老节点elm的下一兄弟节点nextSibling的前面
       parentElm.insertBefore(newElm, elm.nextSibling);
       // 删除来节点elm
       parentElm.removeChild(elm);
       return newElm;
     } else {
       // diff算法后面实现-----------------
     }
   }