1.vue源码entry中runtime-with-compiler.js和runtime.js的区别

用户3258338

发布于 2021-04-01 03:43:05

1.1K00

代码可运行

文章被收录于专栏：女程序员的日常_Lin女程序员的日常_Lin

运行总次数：0

代码可运行

Vue的编译渲染过程

template => ast => render函数 => VDOM => 真实DOM

先将template解析成抽象语法树（ast）
将ast编译成（complier）成render函数
将render函数渲染（render）成虚拟DOM
最后将虚拟DOM渲染成真实DOM

runtime-with-compiler

1. 使用场景

new Vue({
  el:'#app',
  components:{APP},
  remplate:'<APP/>'
})

2. 渲染过程

渲染成最终真实DOM的过程 template ==> ast ==> render ==> vdom ==> UI

runtime-only

1. 使用场景

new Vue({
  el:'#app',

  render: h=>h(APP)
})

2. 渲染过程

渲染成最终真实DOM的过程 render ==> vdom ==> UI

两者对比

render ==> vdom ==> UI

runtime-compiler	runtime-only
体积更大（有compiler代码）	体积更小
有Vue.compilerAPI	无Vue.compilerAPI
可以使用template模板、render函数渲染	只能使用render函数渲染

两者如何选用

runtime-with-compiler

在html中使用vue库，若只使用指令、数据绑定等，此时写template比写render函数更容易理解并方便，则需使用Runtime + Compiler构建的Vue库
挂载DOM元素的HTML被提取出来作为模板，则需使用Runtime + Compiler构建的Vue库

runtime-only

当使用vue-loader或者vueify, *.vue文件内部的模板会在构建时预编译成Javascript.所以最终打包好的包里面实际上是不需要编译器的，所以使用运行时版本即可

透过现象看本质

那么造成这两个区别的到底是什么呢？

原因在于

runtime-with-compiler的打包入口文件是src/platforms/web/entry-runtime-with-compiler.js

runtime-only的打包入口文件是src/platforms/web/entry-runtime.js

runtime-with-compiler实际上引用的就是runtime-only,他们两个唯一的区别就是src/platforms/web/entry-runtime-with-compiler.js，如下我已将不重要的一些代码删除掉了，来看一下：

import config from 'core/config'
import { warn, cached } from 'core/util/index'
import { mark, measure } from 'core/util/perf'

import Vue from './runtime/index'
import { query } from './util/index'
import { compileToFunctions } from './compiler/index'
import { shouldDecodeNewlines, shouldDecodeNewlinesForHref } from './util/compat'

const idToTemplate = cached(id => {
  const el = query(id)
  return el && el.innerHTML
})

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
  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 {
        return this
      }
    } else if (el) {
      template = getOuterHTML(el)
    }
    if (template) {
      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
    }
  }
  return mount.call(this, el, hydrating)
}

/**
 * Get outerHTML of elements, taking care
 * of SVG elements in IE as well.
 */
function getOuterHTML (el: Element): string {
  if (el.outerHTML) {
    return el.outerHTML
  } else {
    const container = document.createElement('div')
    container.appendChild(el.cloneNode(true))
    return container.innerHTML
  }
}

Vue.compile = compileToFunctions

export default Vue