Vue 源码解析 - $mount

上一节讲的new Vue的时候，vue的构造函数会执行this._init()函数，最后执行vm.$mount(vm.$options.el)将实例挂载到dom上。能够看出，vm.$mount为vue render主要函数。页面就会从 {{ message }}变为 ’hello vue‘。主要渲染流程是el、template->render表达式->Vnode->DOM

接下来经过代码来进一步分析

Vue是经过$mount实例方法去挂载

vm

，$mount 方法在多个文件中都有定义，如src/platform/web/entry-runtime-with-complier.js , src/platform/web/runtime/index.js src/platform/weex/runtime/index.js 由于$mount 这个方法的实现是和平台、构建方式都相关的。接下来咱们分析运行时版本的$mount 实现，由于抛开 webpack 的 vue-loader，咱们在纯前端浏览器环境分析 Vue 的工做原理 。

$mount函数在'src/platforms/web/entry-runtime-with-compiler'上被定义

在代码中能够看出，el能够是字符串或者是Element，而且调用了query方法，这个方法在platfomrs/web/util/index.js上被定义

从query方法能够看出，当query传入的参数是字符串的话，会筛选出字符对应的dom节点，转换成dom对象，而且判断字符串不能是body或者html ，若是是的话，就会出现一个错误，防止被覆盖。若是是element的话，就直接返回。

从上图能够看出，接下来会判断是否有render函数以及template，若vue实例中没有render，则将template编译成render，就是说vue只认render函数。同时，由于template能够写成多种形式，由于el也会转换成template（getOutHTML函数），再转换成render。

在代码的末尾定义了getOutHTML函数。

getOutHTML函数主要是得到el所对应的dom及其内容

最后调用mount完成渲染

其中mount方法在platform/runtime/index.js被定义

这些方法主要是作一些判断，并执行mountComponent方法，mountComponent核心就是调用vm._render方法生成虚拟节点，再实例化一个Watcher，在它的回调函数中会调用updateComponent方法，最终调用vm._uppdate更新DOM。

再来看看mountComponent这个方法，在src/core/instance/lifecycle.js能够看到这个方法

这个函数的主要逻辑是判断是否有render函数，若是没有这个函数，则执行createEmptyVNode，又判断版本。接着就是判断若是没有template方法也没有render方法，就会提示报错。

接着就是定义updateComponent方法

从函数体大概能够看出，该方法主要是完成渲染和更新。