2020-02-16 Vue中runtime-compiler和runtime-only的区别

最近看B站上的vue学习视频，是由coderwhy老师讲的，讲的非常好，自己也在慢慢理解vue的由来，正好看到老师讲的 runtime-compiler和runtime-only 的区别，这里写个笔记，把老师讲的和自己理解的记录上去。

image.png

当我们用vue cli 脚手架创建一个vue工程时，会让我们选择runtime-compiler模式还是runtime-only模式，当时写项目的时候不理解，选的是第一个runtime-compiler ，只知道上面写的是推荐我们用，顺便说一句（我们公司开发的项目也是这个，好像也没啥影响）。
听老师讲解后才明白，runtime-compiler只是更保险点，但runtime-only模式运行效率更高，代码量也更少。（这里的为什么runtime-compiler更保险，文中会讲到。）
1.运行效率高
2.代码量更少
对比这两种模式你就会发现这两者最直观的区别就是在src文件里main.js
runtime-compiler

image.png

runtime-only

image.png

image.png

使用runtime-compiler
组件是如何被渲染到页面中的？
　　template ---> ast ---> render ---> vDom ---> 真实的Dom ---> 页面
　　ast：抽象语法树
　　vDom：虚拟DOM
首先当我们把template传给vue的时候，vue首先会进行一个保存，然后解析成ast，然后编译成render函数，render函数构造一个virtual dom(虚拟dom)，最后virtual dom会转换为真实dom，进行页面UI的展示。
使用runtime-only
可以在main.js文件中看到

render :h =>h(App)

这里的箭头函数实际上可以转换成这样

render: function(h) {
  return h(App)
}

这里的h我当时就看不明白，看讲解才发现：h其实是一个Vue中的一个内置函数createElement的缩写，它就是创建虚拟DOM的。这个h是一个函数。图片里的cpn就是app组件对象

image.png

运行步骤是这样
render -> virtual dom -> 真实dom
直接少了template ---> ast --->这一步

这里有个解释。
runtime-only版本的直接省略了template ---> ast 这一步，那app.vue组件中的template这个标签是怎么处理掉的，是怎么直接被解析成render函数的呢？这是因为组件会调用vue中的一个包：vue-template-compiler，编译项目时，这个包会自动将组件中的template转化为render函数的。

解答我自己提出的个问题 为什么 runtime-compiler更保险

如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项，或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板)，就将需要加上编译器，即完整版( runtime-compiler)
如果使用runtime-only就会报错

[Vue warn]: You are using the runtime-only build of Vue where the template compiler 
is not available. Either pre-compile the templates into render functions, or use 
the compiler-included build.复制代码