区别在于main.js

a

对比区别在于Vue实例中，render使用了一个箭头函数，原型是createElement()，用于替换<div class="id">

内部函数createElement()：

1
2
3
4
5
6
7
8
9
10
11
<!--真实开发不会这么写，但是需要了解原理-->
<script>
createElement('标签',{标签属性},[标签内容])
createElement('h2',{class: 'box'},['hello world'])
  // 写子标签
  createElement('h2',{class: 'box'},['hello world',createElement('button',['按钮'])])
</script>
||
<h2 class="box">
  hello world
</h2>

Vue的编译渲染过程

template –> ast(abstract syntax tree 抽象语法树) –> render函数 –> VDOM –> DOM

  • 先将template解析(parse)成抽象语法树(ast)
  • 将ast编译(compiler)成render函数
  • 将render函数渲染(render)成虚拟DOM
  • 最后将虚拟DOM渲染成真实DOM

runtime-compiler的步骤

template –> ast –> render函数 –> VDOM –> DOM

runtime-only的步骤

render函数 –> VDOM –> DOM

对比两者的区别

(1) 首先从代码的完整性来看，runtime-only版本比runtime-compiler版本少了一个API – Vue.compile，这个API是执行前两步，将一个模板字符串编译成 render 函数。因此，runtime-only是无法使用template选项的。

(2) 由于runtime-only少了相应的功能，使得该版本的体积更小。

runtime-compiler runtime-only
体积大 体积小
有Vue.compile API 无Vue.compile API
可以使用template模板、render函数渲染 只可使用render函数渲染

开发项目选择哪种呢

在实际开发项目中，我们偏向使用runtime-only，渲染性能更高，体积小。我们不需要担心template组件无法渲染，因为在开发项目时，我们安装过vue-template-compiler，可以利用它去渲染。