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是否有子节点，递归直到没有子节点。然后创建子节点并插入到父节点中。最后，将原来定义的根节点移除，因为已经重新建立了新的节点替换原来的根节点。

‘贰’ Vue2.6x源码解析（一）：Vue初始化过程

Vue2.6x源码解析（一）：Vue初始化过程

Vue.js的核心代码在src/core目录，它在任何环境都能运行。项目入口通常在src/main.js，引入的Vue构造函数来自dist/vue.runtime.esm.js，这个文件导出了Vue构造函数，允许我们在创建Vue实例前预置全局API和原型方法。

初始化前，Vue构造函数在src/core/instance/index.js中定义，它预先挂载了全局API如set、delete等。即使不通过new Vue初始化，Vue本身已具备所需功能。

当执行new Vue时，实际上是调用了_init方法，这个过程会在src/core/index.js的initGlobalAPI(Vue)中初始化全局API和原型方法。接着，组件实例的初始化与根实例基本一致，包括组件构造函数的定义，以及组件的生命周期、渲染和挂载。

组件初始化过程中，关键步骤包括数据转换为响应式、事件注册和watcher的创建。例如，组件的渲染函数会触发渲染方法，而watcher的更新则通过异步更新队列机制确保性能。

在开发环境，Vue-template-compiler插件负责模板编译，然后runtime中的$mount方法负责实际的渲染和挂载。整个过程涉及组件的构建、渲染函数生成、依赖响应式数据的更新和异步调度。