Vue项目使用细节

Runtime-compiler和Runtime-only的区别

当我们使用Vue CLI2创建项目的时候，会提示让我们选择使用什么版本的Vue

Vue项目使用细节

Runtime + Compiler: recommended for most users（推荐给大多数用户）

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere（min+gzip大约轻6KB，但模板（或任何特定于Vue的HTML）只允许在.Vue文件中使用-其他地方需要呈现函数）

为什么Runtime-only要比Runtime-compiler轻6KB呢？我们分别创建这两个版本的Vue项目，查看有什么不同。

经过对比，分析没有什么不同。唯一不同的就是在于main.js文件中

Vue项目使用细节

经过对比可以发现。Runtime-compiler版本是使用Vue实例的template属性将页面渲染到el挂载id为app的标签中,模板将会替换挂载的元素。挂载元素的内容都将被忽略。而Runtime-only是使用render渲染函数将接受到的组件对象渲染到el挂载的元素。

为什么render渲染函数能把渲染页面呢？我们看看Vue程序的运行过程吧~

Vue项目使用细节

从图可以看到。template->ast->render(functions)->virtual dom->UI

这也解释了为啥使用render函数Runtime-only版本为啥更轻效率更高了。因为Vue程序的运行过程都要经过render渲染函数进行渲染。而Runtime-only版本省去了将template转换成ast这一过程，所以代码更少体积就比少了，运行时间也就减少了效率也就更高了！

那么为什么.vue文件中的template能被Runtime-only版本的render渲染函数给解析渲染呢？

Vue项目使用细节

这是因为我们上次使用Webpack配置使用Vue文件的时候下载使用了vue-template-compiler。同理Vue CLI想要使用.vue文件也下载了这个模块。通过这个模块，他会将.vue文件中的template转成render函数。所以也就能成功渲染到页面了。

如果在之后的开发中，你依然使用template，就需要选择Runtime-Compiler

如果你之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only

Runtime-Compiler是完整版的Vue，所以也能使用render。而Runtime-only则是精简版的Vue只能使用render。

render函数的使用

基本使用

createElement('标签',{标签的属性(可不传)}。['内容'])

Vue项目使用细节

createElement('h2',{class:'box'},['Hello'])在页面中被渲染成了<h2 class='box'>Hello</h2>

嵌套使用

Vue项目使用细节

标签的属性可以省略不传，在内容中嵌套使用createElement函数

Vue项目使用细节

createElement('h2', {class:'box'}, ['Hello World',createElement('button',['按钮'])])被渲染成<h2 class='box'>Hello World <button><按钮/button></h2>

组件对象

Demo.vue

Vue项目使用细节

把组件对象渲染到了el挂载的元素

Vue项目使用细节

这也就是为啥能这样使用的原因了。h=>h(App)是使用了箭头函数将其还原也就是

Vue项目使用细节

h是形参名。代表着createElement函数

Vue项目使用细节

Vue Cli4创建的Runtime-only版的Vue项目

通过Vue CLI4(3)创建的Runtime-only版本的Vue项目的main.js又发生了点变化

Vue项目使用细节

可以发现此时代码中少了el属性选项，而多了个Vue实例方法$mount这又是什么意思呢？

Vue项目使用细节

如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。也就是说 m o u n t ( ) 方法的参数是一个选择器， mount()方法的参数是一个选择器， mount()方法的参数是一个选择器，mount(’#app’)是将id为appDOM元素挂载到我们的Vue实例中，效果和el一样