至此，整个new Vue的渲染过程完毕。
首先，Vue的入口是/src/entries/web-runtime-with-compiler.js，这是由config.js配置文件决定的。 其中/src/core/instance/index.js是最核心的初始化代码，其中：
整个Vue的类的核心方法
1. initMixin(Vue) //初始化的入口，各种初始化工作 2. stateMixin(Vue) //数据绑定的核心方法，包括常用的$watch方法 3. eventsMixin(Vue) //事件的核心方法，包括常用的$on，$off，$emit方法 4. lifecycleMixin(Vue) //生命周期的核心方法 5. renderMixin(Vue) //渲染的核心方法，用来生成render函数以及VNode其中new Vue就是执行下面的这个函数： _init方法就是initMixin中的_init方法
在定义完成Vue对象的初始化工作之后，本文主要是讲渲染部分，那么我们接上面的逻辑，看Vue.js是如何渲染页面的。在上图中我们看到有一个initRender的方法： $mount方法就是整个渲染过程的起始点。具体定义是在/src/entries/web-runtime-with-compiler.js中，根据代码整理成流程图： 这三种渲染模式最终都是要得到Render函数。只不过用户自定义的Render函数省去了程序分析的过程，等同于处理过的Render函数，而普通的template或者el只是字符串，需要解析成AST，再将AST转化为Render函数。
我们在使用过程中具体要使用哪种调用方式，要根据具体的需求来。
如果是比较简单的逻辑，使用template和el比较好，因为这两种都属于声明式渲染，对用户理解比较容易，但灵活性比较差，因为最终生成的Render函数是由程序通过AST解析优化得到的；
而使用自定义Render函数相当于人已经将逻辑翻译给程序，能够胜任复杂的逻辑，灵活性高，但对于用户的理解相对差点。
我们知道Render函数执行生成了VNode，而VNode只是Virtual DOM，我们还需要通过DOM Diff之后，来生成真正的DOM节点. 1、JavaScript模拟DOM模型树 在Vue.js 2.0中javascript模拟DOM模型树就是VNode，Render函数执行后都会返回VNode对象，为下一步操作做准备。在/src/core/vdom/vnode.js中，我们可以看到VNode的具体数据结构：
VNode的数据结构中还有VNodeData、VNodeDirective、VNodeComponentOptions，这些数据结构都是对DOM节点的一些描述，本文不一一介绍。读者可以根据源码来理解这些数据结构。（PS：Vue.js使用了flow，标识了参数的静态类型）
2、DOM模型树通过DOM Diff算法查找差异，将差异转为真正DOM节点
我们知道Render函数执行生成了VNode，而VNode只是Virtual DOM，我们还需要通过DOM Diff之后，来生成真正的DOM节点。在Vue.js 2.0中，是通过/src/core/vdom/patch.js中的patch(oldVnode, vnode ,hydrating)方法来完成的。
该方法有三个参数oldVnode表示旧VNode，vnode表示新VNode，hydrating表示是否直接使用服务端渲染的DOM元素. 其主要逻辑为当VNode为真实元素或旧的VNode和新的VNode完全相同时，直接调用createElm方法生成真实的DOM树，当VNode新旧存在差异时，则调用patchVnode方法，通过比较新旧VNode节点，根据不同的状态对DOM做合理的添加、删除、修改DOM（这里的Diff算法有兴趣的读者可以自行阅读patchVnode方法，鉴于篇幅不再赘述），再调用createElm生成真实的DOM树。
转载至: https://www.cnblogs.com/ypinchina/p/7238402.html
