vue源码分析

Ⅰ vue源码解析(5)-update

在$mount函数中，主要是调用了mountComponent函数，最终该函数调用了updateComponent函数。updateComponent函数的核心作用是vm._update方法，它的主要目的是将vnode渲染成为真正的dom。我们本次分析的重点是首次渲染过程中的update方法，该方法的定义位于src/core/instance/lifecycle.js。

首先回顾整个过程，定义一些用于数据更新的变量，如prevVnode等。因为此时为空，所以进入vm._patch_方法。这个方法的定义位于src/platforms/web/runtime/index.js，作用是判断当前环境是否为浏览器，如果有patch函数则执行，否则返回空函数。

我们再看patch方法的具体定义，它位于src/platforms/web/runtime/patch.js。patch方法实际调用了createPatchFunction，传入了nodeops和moles两个参数。nodeops是一些操作dom的方法，而moles定义了类的一些钩子函数，这些函数会在patch过程中被调用。

createPatchFunction函数定义在src/core/vdom/patch.js。它会首先拿到moles，然后遍历并执行各个阶段的钩子函数。这些阶段包括create、activate、update、remove、destroy等。最后，该函数会返回patch函数。

因此，我们调用vm._patch_函数最终就是调用这个patch函数。注意，与平台相关的代码都托管在src/platforms目录下。在Web和Weex环境中，它们将虚拟DOM映射到“平台DOM”的方法不同，并且对“DOM”包括的属性模块的创建和更新也不尽相同。因此，每个平台都有各自的nodeOps和moles，它们的代码需要托管在src/platforms这个大目录下。

而不同平台的patch方法的主要逻辑部分是相同的，这部分公共部分托管在core这个大目录下。差异化部分只需要通过参数来区别，这里用到了函数柯里化的技巧，通过createPatchFunction提前固化了差异化参数，这样每次调用patch函数时不必都传递nodeOps和moles。patch方法本身接收4个参数，oldVnode表示旧的VNode节点，vnode表示执行_render后返回的VNode节点，hydrating表示是否是服务端渲染，removeOnly是给transition-group用的。

接下来分析patch函数的实现。首先判断vnode和oldVnode，因为isRealElement为true，所以进入相应的代码块。进一步判断旧节点的类型和是否为服务端渲染，最终执行到emptyNodeAt函数，它将真实的DOM转化为vnode。createElm函数负责通过虚拟节点创建真实的DOM并插入到父节点中，createComponent方法尝试创建子组件。接着，判断vnode是否包含tag，如果包含，先进行非生产环境下的合法性校验，然后调用平台DOM操作创建占位符元素。

在createElm函数中，主要功能是将构建的DOM子节点插入到父节点中，直到没有子节点为止。这个过程与createChildren函数一起完成。createChildren函数用于处理矩阵形式的子节点，调用createElm函数创建DOM节点并插入到父节点。如果子节点是文本节点且不是最后一个节点，则直接插入到DOM节点后面。递归调用createElm函数是一种常用的深度优先遍历算法。

在完成创建和插入DOM节点后，执行所有create钩子函数，并将vnode推入insertedVnodeQueue中。最后，调用insert方法将DOM插入到父节点中。因为是递归调用，子元素优先调用insert，所以整个vnode树节点的插入顺序是先子后父。

实例的私有方法_update主要是调用了patch函数，patch函数的核心功能是将vnode转换为DOM节点然后渲染在视图中。为了生成DOM节点，需要判断vnode是否有子节点，递归直到没有子节点。然后创建子节点并插入到父节点中。最后，将原来定义的根节点移除，因为已经重新建立了新的节点替换原来的根节点。