Vue的两个版本
-
Runtime Only
这个版本Vue在Webpack编译的时候就将template模板预编译成了render函数，所以这个版本既减小了打包的大小，又提高了运行时的效率
-
Runtime + Compiler
这个版本没有对代码进行预编译，所以template会在APP运行的时候来编译，在编译的过程中对性能会有一定的损耗。
如果是在代码里有动态传入template，那么就必须使用带编译器版本的Vue
new Vue({
template: '<div>{{ hi }}</div>'
})
入口开始
src/platforms/web/entry-runtime-with-compiler.js
在这里对Vue对象加上了相应运行环境的方法，主要是以下几个比较重要的
- virtualDom的patch方法
import { patch } from './patch'
// install platform patch function
Vue.prototype.__patch__ = inBrowser ? patch : noop
- mount
vue先在src/platforms/web/runtime/index.js中将mount函数进行重新赋值。
第一个$mount函数的作用是真正的挂载Vue组件到DOM上的方法
第二个$mount函数是将Vue的template编译成了render函数
-------------------->src/platforms/web/runtime/index.js
/*组件挂载方法*/
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
/*获取DOM实例对象*/
el = el && inBrowser ? query(el) : undefined
/*挂载组件*/
return mountComponent(this, el, hydrating)
}
-------------->src/platforms/web/entry-runtime-with-compiler.js
/*把原本不带编译的$mount方法保存下来，在最后会调用。*/
const mount = Vue.prototype.$mount
/*挂载组件，带模板编译*/
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean //服务端渲染的参数
): Component {
el = el && query(el)
const options = this.$options
// resolve template/el and convert to render function
/*处理模板templete，编译成render函数，render不存在的时候才会编译template，否则优先使用render*/
if (!options.render) {
...
...
...
/*将template编译成render函数，这里会有render以及staticRenderFns两个返回，这是vue的编译时优化，static静态不需要在VNode更新时进行patch，优化性能*/
if (template) {
const { render, staticRenderFns } = compileToFunctions(template, {
shouldDecodeNewlines,
delimiters: options.delimiters
}, this)
options.render = render
options.staticRenderFns = staticRenderFns
}
}
/*调用const mount = Vue.prototype.$mount保存下来的不带编译的mount*/
return mount.call(this, el, hydrating)
}
从上面一直看到Vue，那么这个Vue对象是哪里来的呢？多跳几个import语句就能看到
它其实在core/instance/index中定义的
function Vue (options) {
/*初始化*/
this._init(options)
}
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
export default Vue
可以看到非常的优雅（ps：看起来很少的意思，只有几行。在我们做new Vue()这个操作的时候，就是调用它的_init函数这个过程。下面几个函数的调用，是对Vue.prototype上挂上各种方法，_init方法也是在这里挂上的。接下来就要开始看这些方法到底给Vue挂上了什么啦!!!
