写于vue3.0发布前夕的helloworld之四

OK。接上回到render：

with(this){return _c('div',{attrs:{"id":"app"}},[_v(_s(msg))])}

接着开始执行_s：一言以蔽之，就是undefined 和null输出一个空字符串，其他类型需要转换，然后开始执行_v方法:

function createTextVNode (val) {
    return new VNode(undefined, undefined, undefined, String(val))
  }

就是创建了一个虚拟的文本节点，然后执行_c方法：

vm._c = function (a, b, c, d) { return createElement(vm, a, b, c, d, false); };

这个之前有提过，等执行完这些方法之后，我们就会有一个虚拟DOM节点，长这样：

至此，vm._render执行完毕，代码最终返回到updateComponent方法里，开始执行，vm._update：

Vue.prototype._update = function (vnode, hydrating) {
      var vm = this;
      var prevEl = vm.$el;
      var prevVnode = vm._vnode;
      var restoreActiveInstance = setActiveInstance(vm);
      vm._vnode = vnode;
      // Vue.prototype.__patch__ is injected in entry points
      // based on the rendering backend used.
      if (!prevVnode) {
        // initial render
        vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */);
      } else {
        // updates
        vm.$el = vm.__patch__(prevVnode, vnode);
      }
      restoreActiveInstance();
      // update __vue__ reference
      if (prevEl) {
        prevEl.__vue__ = null;
      }
      if (vm.$el) {
        vm.$el.__vue__ = vm;
      }
      // if parent is an HOC, update its $el as well
      if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
        vm.$parent.$el = vm.$el;
      }
      // updated hook is called by the scheduler to ensure that children are
      // updated in a parent's updated hook.
    };

和其他函数一样一开始先拿一些所需用到的变量，这里因为是第一次挂载，prevVnode为undefined，__patch__方法执行remove移除策略，代码注释中也有讲到：

function patch (oldVnode, vnode, hydrating, removeOnly) {
      if (isUndef(vnode)) {
        if (isDef(oldVnode)) { invokeDestroyHook(oldVnode); }
        return
      }

      var isInitialPatch = false;
      var insertedVnodeQueue = [];

      if (isUndef(oldVnode)) {
        // empty mount (likely as component), create new root element
        isInitialPatch = true;
        createElm(vnode, insertedVnodeQueue);
      } else {
        var isRealElement = isDef(oldVnode.nodeType);
        if (!isRealElement && sameVnode(oldVnode, vnode)) {
          // patch existing root node
          patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly);
        } else {
          if (isRealElement) {
            // mounting to a real element
            // check if this is server-rendered content and if we can perform
            // a successful hydration.
            if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {
              oldVnode.removeAttribute(SSR_ATTR);
              hydrating = true;
            }
            if (isTrue(hydrating)) {
              if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
                invokeInsertHook(vnode, insertedVnodeQueue, true);
                return oldVnode
              } else {
                warn(
                  'The client-side rendered virtual DOM tree is not matching ' +
                  'server-rendered content. This is likely caused by incorrect ' +
                  'HTML markup, for example nesting block-level elements inside ' +
                  '<p>, or missing <tbody>. Bailing hydration and performing ' +
                  'full client-side render.'
                );
              }
            }
            // either not server-rendered, or hydration failed.
            // create an empty node and replace it
            oldVnode = emptyNodeAt(oldVnode);
          }

          // replacing existing element
          var oldElm = oldVnode.elm;
          var parentElm = nodeOps.parentNode(oldElm);

          // create new node
          createElm(
            vnode,
            insertedVnodeQueue,
            // extremely rare edge case: do not insert if old element is in a
            // leaving transition. Only happens when combining transition +
            // keep-alive + HOCs. (#4590)
            oldElm._leaveCb ? null : parentElm,
            nodeOps.nextSibling(oldElm)
          );

          // update parent placeholder node element, recursively
          if (isDef(vnode.parent)) {
            var ancestor = vnode.parent;
            var patchable = isPatchable(vnode);
            while (ancestor) {
              for (var i = 0; i < cbs.destroy.length; ++i) {
                cbs.destroy[i](ancestor);
              }
              ancestor.elm = vnode.elm;
              if (patchable) {
                for (var i$1 = 0; i$1 < cbs.create.length; ++i$1) {
                  cbs.create[i$1](emptyNode, ancestor);
                }
                // #6513
                // invoke insert hooks that may have been merged by create hooks.
                // e.g. for directives that uses the "inserted" hook.
                var insert = ancestor.data.hook.insert;
                if (insert.merged) {
                  // start at index 1 to avoid re-invoking component mounted hook
                  for (var i$2 = 1; i$2 < insert.fns.length; i$2++) {
                    insert.fns[i$2]();
                  }
                }
              } else {
                registerRef(ancestor);
              }
              ancestor = ancestor.parent;
            }
          }

          // destroy old node
          if (isDef(parentElm)) {
            removeVnodes(parentElm, [oldVnode], 0, 0);
          } else if (isDef(oldVnode.tag)) {
            invokeDestroyHook(oldVnode);
          }
        }
      }

      invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch);
      return vnode.elm
    }
  }

patch方法中，首先会初始化isRealElement变量，这里我们我们的oldVnode调用的时候直接传的是div的引用，故而为true，所以if-else分支走了最下面的一个，当然这是第一次挂载，当为更新的时候，isRealElement的值为false，就会执行patchVnode方法，去patch新旧Vnode， 这里注意，patch的时候，patchVnode，只会在两个vnode是相同的时候才会patch，而什么时候是两个相同的vnode呢？就是下面这个方法的返回值为真的时候：

function sameVnode (a, b) {
    return (
      a.key === b.key && (
        (
          a.tag === b.tag &&
          a.isComment === b.isComment &&
          isDef(a.data) === isDef(b.data) &&
          sameInputType(a, b)
        ) || (
          isTrue(a.isAsyncPlaceholder) &&
          a.asyncFactory === b.asyncFactory &&
          isUndef(b.asyncFactory.error)
        )
      )
    )
  }

所以看到key值得重要性了么。

继续到我们得patch得方法，接着会调emptyNodeAt，创造一个tag是div得空Vnode，然后将挂载上得div元素引用和body得引用拿到，使用createElm方法创建真实得dom节点：

function createElm (
      vnode,
      insertedVnodeQueue,
      parentElm,
      refElm,
      nested,
      ownerArray,
      index
    ) {
      if (isDef(vnode.elm) && isDef(ownerArray)) {
        // This vnode was used in a previous render!
        // now it's used as a new node, overwriting its elm would cause
        // potential patch errors down the road when it's used as an insertion
        // reference node. Instead, we clone the node on-demand before creating
        // associated DOM element for it.
        vnode = ownerArray[index] = cloneVNode(vnode);
      }

      vnode.isRootInsert = !nested; // for transition enter check
      if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
        return
      }

      var data = vnode.data;
      var children = vnode.children;
      var tag = vnode.tag;
      if (isDef(tag)) {
        {
          if (data && data.pre) {
            creatingElmInVPre++;
          }
          if (isUnknownElement$$1(vnode, creatingElmInVPre)) {
            warn(
              'Unknown custom element: <' + tag + '> - did you ' +
              'register the component correctly? For recursive components, ' +
              'make sure to provide the "name" option.',
              vnode.context
            );
          }
        }

        vnode.elm = vnode.ns
          ? nodeOps.createElementNS(vnode.ns, tag)
          : nodeOps.createElement(tag, vnode);
        setScope(vnode);

        /* istanbul ignore if */
        {
          createChildren(vnode, children, insertedVnodeQueue);
          if (isDef(data)) {
            invokeCreateHooks(vnode, insertedVnodeQueue);
          }
          insert(parentElm, vnode.elm, refElm);
        }

        if (data && data.pre) {
          creatingElmInVPre--;
        }
      } else if (isTrue(vnode.isComment)) {
        vnode.elm = nodeOps.createComment(vnode.text);
        insert(parentElm, vnode.elm, refElm);
      } else {
        vnode.elm = nodeOps.createTextNode(vnode.text);
        insert(parentElm, vnode.elm, refElm);
      }
    }

一进来得if是说如果当前得vnode在前一个render中，现在被当作一个新得vnode使用时，重写他的elm属性可能会引发后续得patch error，这个时候应该clone他。下来会使用createComponent方法做个检查，接着拿到vnode得data，children，tag，以上三个都是创建dom节点时需要用到的，setscope之后创建children节点，createChildren就是循环children依次调用createElm完成得，这里子节点因为是文本节点最后调用了nodeOps.createTextNode完成创建，并插入到父级得el上，然后会使用invokeCreateHooks更新dom属性，最后将完成得新的dom节点插入到body上。

执行完createElm方法后，就会将新生成得dom节点插入到dom树上，然后我们得代码继续走，返回到patch方法中，移除原来得dom节点。然后patch执行完毕，返回到Vue.prototype._update方法中，执行一些标记操作，然后继续返回，直到返回到Watcher.prototype.get中，接下来执行popTarget方法，将当前watcher实例从targetStack中拿出来，并将dep.target设置为undefined，这也预示着此次依赖收集已经结束，接着执行Watcher.prototype.cleanupDeps重新初始化deps属性，然后回到依赖收集最开始得那条语句，也就是watcher得构造函数里的：

this.value = this.lazy
      ? undefined
      : this.get();

至此，dom挂载结束，依赖收集完毕，然后回到mountComponent方法，唤起mounted生命周期钩子，层层返回。然后源码版hello wrold至此结束。随后还会有一个异步代码，唤起devtools，这是后话。