Vue中render的流程

从我的上两篇文章已经讲了Vue的数据响应了，那么怎么render和re-render呢？
我看的是2.1.10这个版本的，init.js中initMixin()的初始化代码是这样写的

    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    callHook(vm, 'beforeCreate')
    initState(vm)  
    callHook(vm, 'created')
    //下面这句代码是真正开始渲染的部分
    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }

其实在initRender(vm)函数中就做了一些渲染的初始化工作，我后面会具体讲。
Vue中有两个地方定义过Vue.prototype.$mount。一个是在web-runtime.js一个是在web-runtime-with-compile.js，这里就涉及到Vue的两种构建方式。独立构建和运行时构建。

独立构建和运行时构建

独立构建和运行时构建的区别是，前者包括模板编译，后者不包含。
模板编译是将模板字符串编译成渲染函数。Vue的渲染包括两步，第一是编译过程，是将字符串模板编译成render函数；第二运行过程，是运行render函数。
独立构建会执行template到render函数，支持template选项，但是依赖浏览器接口，所以不能用来作为服务器端渲染。
运行时构建不包括编译部分，直接执行render函数，所以不支持template选项，但是因为没有编译过程，让框架更轻量。
虽然运行时不能写template选项，但是单文件组件中还是可以写模板，通常我们会用vue-loader 和 vueify 预编译模板，最终只用打包运行时，而不用打包编译器。

现在回过来看👀代码
在web-runtime-with-compile.js中

//缓存了'./web-runtime'中的Vue.prototype.$mount
const mount = Vue.prototype.$mount

//然后重新覆盖了Vue.prototype.$mount
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  //生成el的dom
  el = el && query(el)
  const options = this.$options
  // resolve template/el and convert to render function
 //如果没有render就将template转为render
  if (!options.render) {
    let template = options.template
    if (template) {
        template = idToTemplate(template)
      } else if (template.nodeType) {
        template = template.innerHTML
      } else {
        return this
      }
    } else if (el) {
      //直接把el中的整个代码以字符串赋给template
      template = getOuterHTML(el)
    }
    //这里开始编译 template
    if (template) {
      const { render, staticRenderFns } =compileToFunctions(template, {
        warn: msg => warn(msg, this),
        shouldDecodeNewlines,
        delimiters: options.delimiters
      }, this)
      //将compileToFunctions生成的render给this.$options
      options.render = render
    }
  }
  //用缓存了'./web-runtime'中的Vue.prototype.$mount来执行
  //然额'./web-runtime'中的Vue.prototype.$mount'用的是lifecycle.js中的_mount
  return mount.call(this, el, hydrating)
}

分析一遍：
首先缓存了./web-runtime也就是运行时构建中定义的Vue.prototype.$mount方法，然后重新定义该方法，对有render选项的直接调用缓存的$mount()，如果没有render方法，就检查是否有template选项，如果有就将template编译成render，如果没有就将el中的代码转成字符串，然后进行编译生成render。
可以看出，最终都是生成render函数，然后调用缓存下来的mount函数。下面在看mount函数。
web-runtime.js中

Vue.prototwype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  /**
   * query => 检查el是否在页面中可以找到，
   * 如果找不到就create一个div,
   * 如果找到了，就返回document.querySelector(el)
   */
  el = el && inBrowser ? query(el) : undefined
  //这里的_mount方法在lifecycle.js中定义
  return this._mount(el, hydrating)
}

可以看出，最终都将调用lifecycle.js中定义的_mount()，那继续看这个方法

Vue.prototype._mount = function (
    el?: Element | void,
    hydrating?: boolean
  ): Component {
    const vm: Component = this
    //实例上添加$el
    vm.$el = el
    //执行beforeMount生命周期钩子
    callHook(vm, 'beforeMount')

    vm._watcher = new Watcher(vm, function updateComponent () {
      vm._update(vm._render(), hydrating)
    }, noop)

    hydrating = false
    // manually mounted instance, call mounted on self
    // mounted is called for render-created child components in its inserted hook
    //如果第一次执行mount就触发mounted生命周期钩子
    if (vm.$vnode == null) {
      vm._isMounted = true
      callHook(vm, 'mounted')
    }
    return vm
  }

额。。。我觉得上面的注释还是写得挺清楚的。这里重点讲一下这一句

vm._watcher = new Watcher(vm, function updateComponent () {
      vm._update(vm._render(), hydrating)
}, noop)

根据之前数据响应部分已经讲过Watcher这个构造函数。Watcher在创建实例的时候会触发get()，这里get就是执行updateComponent () => vm._update() => vm.render()，可以看出最先执行的是vm.render()。

Vue.prototype._render = function (): VNode {
    const vm: Component = this

    //解构$options中的render
    //$options.render是compileToFunctions将template或者el编译出来的
    const {
      render,
      staticRenderFns,
      _parentVnode
    } = vm.$options
    vm.$vnode = _parentVnode
    // render self
    let vnode
    try {
      vnode = render.call(vm._renderProxy, vm.$createElement)
      ...
    } catch (e) {
      ...
      vnode = vm._vnode
    }
    return vnode
  }
vm._renderProxy = vm

首先很容易看出_render()方法返回的是一个vnode，该方法中调用的是 render。render打印出来看是这样的函数

function anonymous() {
  with(this){
    return _c('div',{attrs:{"id":"app"} },
                    [ _v("\n    "+_s(sum)+"\n  ")]                 
    )}
}

首先，可以知道这个函数中的this指向了vm本身。_c,_v,_s,sum都是vm的方法和属性。在获取this.sum就会触发definePropery()的get()。好了，现在可以将render和数据响应关联起来了。在执行new Watcher(updateComponent())的时候收集依赖，在依赖的值改变的时候，触发watcher的updateComponent，重新收集依赖。
其实在template转为render的时候，中间是先生成的抽象语法树（AST）提取静态节点，然后再转为render。并且还有vnode的patch算法，在这篇文章还没有讲到。如果后面代码我还能看懂的话，我还会写出来。。。。。