Runtime-Compiler和Runtime-only的区别

1、Runtime-Compiler和Runtime-only的main.js文件的区别：

 

//（1） Runtime-Compiler
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

// （2）Runtime-only
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

// Runtime-Complier 解析过程：
第一步：将template模板转换成抽象语法树（ast）;
第二步：通过render函数将抽象语法树转换成虚拟DOM（vdom）;
第三步：将虚拟DOM转换成真正的DOM；
template => 抽象语法树(ast) => render() => 虚拟DOM(vdom) => 页面

// Runtime-only 解析过程：
第一步：vue-template-compiler插件直接将组件转换成 render函数；
第二步：将render函数返回的虚拟DOM转换成页面；
render() => 虚拟DOM(vdom) => 页面；

2、render函数:

 

var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c(
    "div",
    { attrs: { id: "app" } },
    [
      _c("img", { attrs: { src: require("./assets/logo.png") } }),
      _vm._v(" "),
      _c("router-view")
    ],
    1
  )
}
// render函数返回的是虚拟DOM

3、两者对比：

 

（1）Runtime-only性能更高；
（2）Runtime-only代码量更少；