从我的上两篇文章已经讲了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算法，在这篇文章还没有讲到。如果后面代码我还能看懂的话，我还会写出来。。。。。