vue-5

2-6 vue实例挂载的实现

我们选择的是 RunTime+compiler版本，所以入口文件是platforms/web/entry-runtime-with-compiler.js 。
首先我们能够看到platforms/web/entry-runtime-with-compiler.js里写入了Vue.prototype.$mount。但是我们又发现当前文件引入的./runtime/index里面也同样写入了Vue.prototype.$mount。那么作者为什么要重复定义原型上的$mount方法呢。
因为我们当前使用的是Runtime+compiler版本，也就是说platforms/web/entry-runtime-with-compiler.js里面给Vue原型上绑定的$mount方法是给Runtime+compiler版本使用的。而./runtime/index里面给Vue原型上定义的$mount是给RuntimeOnly版本使用的。

但事实上我们可以通过源码来看，不管是哪个版本最终都需要执行mountComponent()函数，所以接下来我们一起看一下这个函数。

首先从判断来看，可以知道如果我们使用的是Runtime-only版本的话，需要写的是render函数。而Runtime+compiler版本的话，我们写的就是template模板代码了。

总体来说Vue最终要的就是render，如果你没有的话他就会进行报错。另外当检查完是否有render函数之后，就会进行beforeMount的生命周期回调了。也会执行到重点函数：

updateComponent = () => {
	vm._update(vm._render(), hydrating)
}

其中hydrating是服务器端渲染的控制，我们默认他是false就行。
updateComponent定义好之后怎么执行呢:

  new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted && !vm._isDestroyed) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)

我们发现当new Watcher时会执行updateComponent，这个watcher被称为渲染watcher。
vm.render()的作用是把render函数转换为vNode，而vm._update则是把虚拟dom转换为真实dom的一个过程。也就是说updateComponent()方法就是执行了一次真实渲染。

那么我们接下来先看一下vm._render()是怎么实现的，他是被定义在core/instance/render.js中。 Vue.prototype._render中的render可以是用户自己去写，也可以通过编译生成。其中比较重要的一个属性是给vm上绑定了一个$creteElement属性。

vnode = render.call(vm._renderProxy, vm.`$createElement`) 

第一个参数其实是根据开发和生产环境区分的，如果是生产环境的话其实这里的vm._renderProxy就是vm本身。但是开发环境它会执行一个initProxy()的方法，它的作用是帮助我们纠正一些开发环境写的一些bug代码，比如使用了没有定义的变量。

它的目的是为了拿到vnode。