>[success] # 挂载阶段 ~~~ 1.经过上个章节的分析$mount 有两个版本一个版本是'runtime only 版本的 Vue '对 在'src/platform/web/runtime/index.js',这个版本只能用render 函数，另一个版本 'runtime compiler'对应在'platforms\web\runtime-with-compiler.js' 边运行变将 '模板渲染'翻译成AST在转译成'render',即使是'runtime compiler'版本的$mount最后也都使用了 'runtime only 版本的 。 2.接下来Vue 要做的就是：函数被调用的时候就会渲染并且返回一个虚拟DOM的树。这个树非常轻量， 它的职责就是描述当前界面所应处的状态。当我们有了这个虚拟的树之后，再交给一个patch函数， 负责把这些虚拟DOM真正施加到真实的DOM上 3.接下来要做的就是生命周期这个部分 ~~~  >[info] ## 分析 挂载阶段 ~~~ 1.因此最后即使你使用的是'函数渲染'版本vue也是将render 变成 虚拟dom过程，整个 分析就变成了'runtime only' 版本 ~~~ >[danger] ##### runtime only 版本的 $mount ~~~ 1.'runtime only' 版本$mount 代码很短，最后整个工作交给了'mountComponent'（挂载组件） ~~~ ~~~ // wrap mount Vue.prototype.$mount = function ( el?: any, hydrating?: boolean ): Component { return mountComponent( this, el && query(el, this.$document), hydrating ) } ~~~ >[danger] ##### mountComponent（挂载组件） ~~~ 1.在下面的源码'mountComponent'函数的定义位于源码的'src/core/instance/lifecycle.js'中 2.下面代码做的事情： 2.1.判断实例上是否存在渲染函数，如果不存在，则设置一个默认的渲染函数createEmptyVNode，、 该渲染函数会创建一个注释类型的VNode节点 2.2.然后调用callHook函数来触发beforeMount生命周期钩子函数，beforeMount生命周期在这里触发。 这里就可以理解生命周期中说的，判断模板格式是否正确（2.1做了这个），也可以理解此时只是 render 函数并没有形成虚拟dom，也没有将页面内容真正渲染上 2.3.定义了'updateComponent',其中这个定义函数中参数'vm._render()'将会为我们得到一份最新的VNode 节点树,'如果调用了updateComponent函数，就会将最新的模板内容渲染到视图页面中' 2.4.接下来到了watcher 这部分，updateComponent函数作为第二个参数传给Watcher类从而创建了 watcher实例，那么updateComponent函数中读取的所有数据都将被watcher所监控 2.5挂载阶段才算是全部完成了，接下来调用挂载完成的生命周期钩子函数mounted ~~~ ~~~ export function mountComponent ( vm: Component, el: ?Element, hydrating?: boolean ): Component { vm.$el = el if (!vm.$options.render) { /*render函数不存在的时候创建一个空的VNode节点*/ vm.$options.render = createEmptyVNode if (process.env.NODE_ENV !== 'production') { /* istanbul ignore if */ if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') || vm.$options.el || el) { warn( 'You are using the runtime-only build of Vue where the template ' + 'compiler is not available. Either pre-compile the templates into ' + 'render functions, or use the compiler-included build.', vm ) } else { warn( 'Failed to mount component: template or render function not defined.', vm ) } } } /*触发beforeMount钩子*/ callHook(vm, 'beforeMount') /*updateComponent作为Watcher对象的getter函数，用来依赖收集*/ let updateComponent /* istanbul ignore if 一些埋点操作 省略掉了*/ if (process.env.NODE_ENV !== 'production' && config.performance && mark) { ...... } else { updateComponent = () => { vm._update(vm._render(), hydrating) } } /*这里对该vm注册一个Watcher实例，Watcher的getter为updateComponent函数， 用于触发所有渲染所需要用到的数据的getter，进行依赖收集，该Watcher实例会存在所有 渲染所需数据的闭包Dep中*/ vm._watcher = new Watcher(vm, updateComponent, noop) hydrating = false // manually mounted instance, call mounted on self // mounted is called for render-created child components in its inserted hook if (vm.$vnode == null) { /*标志位，代表该组件已经挂载*/ vm._isMounted = true /*调用mounted钩子*/ callHook(vm, 'mounted') } return vm } ~~~