vue源码分析（二）vue运行时版本和带编译的版本区别。

vue版本

vue打包后的版本有很多，其中可以归结为三大类，运行时和带编译以及完整版。
具体版本信息及版本差异请移步官网，本文主要是从源码分析两种版本之间的主要差异。

源码分析

查看源码文件src/platforms/web/entry-runtime-with-compiler.js 可以看到当前文件夹下的vue模块来自于'./runtime/index'运行时版本中的vue

// src/platforms/web/entry-runtime-with-compiler.js
const mount = Vue.prototype.$mount   //缓存运行时定义的$mount方法
Vue.prototype.$mount = function (    // 重新定义$mount方法
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && query(el)

  /* istanbul ignore if */
  if (el === document.body || el === document.documentElement) {
    process.env.NODE_ENV !== 'production' && warn(
      `Do not mount Vue to  or  - mount to normal elements instead.`
    )
    return this
  }

  const options = this.$options
  // resolve template/el and convert to render function
   //如果没有render函数，判断是否存在options对象中是否存在template
  if (!options.render) {  
 	let template = options.template
    if (template) {
      if (typeof template === 'string') {
        if (template.charAt(0) === '#') {
          template = idToTemplate(template)   
          /* istanbul ignore if */
          if (process.env.NODE_ENV !== 'production' && !template) {
            warn(
              `Template element not found or is empty: ${options.template}`,
              this
            )
          }
        }
      } else if (template.nodeType) {
        template = template.innerHTML
      } else {
        if (process.env.NODE_ENV !== 'production') {
          warn('invalid template option:' + template, this)
        }
        return this
      }
    } else if (el) {
      template = getOuterHTML(el)
    }
    if (template) {
      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile')
      }
	 // 将template最终转化成render函数和staticRenderFns 
      const { render, staticRenderFns } = compileToFunctions(template, {
        outputSourceRange: process.env.NODE_ENV !== 'production',
        shouldDecodeNewlines,
        shouldDecodeNewlinesForHref,
        delimiters: options.delimiters,
        comments: options.comments
      }, this)
      options.render = render
      options.staticRenderFns = staticRenderFns

      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile end')
        measure(`vue ${this._name} compile`, 'compile', 'compile end')
      }
    }
  }
  // 调用缓存的mount方法
  return mount.call(this, el, hydrating)
}

从源码中可以看到在含编译的index.js中重新定义了原型上的$mount方法，如果options对象中没有render函数会判断是否存在模板template,然后调用compileToFunctions
方法生成render函数和staticRenderFns函数。最终会调用运行时的vue文件src/platforms/web/runtime/index.js中的$mount方法。在使用含编译器的vue版本时如果没有render和template选项会提示Template element not found or is empty

总结

运行时版本和带编译的版本主要区别在于对template的处理，使用带编译功能的vue版本，能支持template属性。最终都会调用lifecycle.js (具体路径在源码目录下搜索文件名)下的mountComponent方法。