Vue项目使用细节

Runtime-compiler和Runtime-only的区别

当我们使用Vue CLI2创建项目的时候，会提示让我们选择使用什么版本的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文件中

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

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

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

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

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

这是因为我们上次使用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('标签',{标签的属性(可不传)}。['内容'])

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

嵌套使用

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

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

组件对象

Demo.vue

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

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

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

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

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

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

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

ESLint规范

当我们使用Vue CLI创建项目是，如果选择了ESLint规范，就会对我们的代码进行检查。

不符合规范的则会提示报错。例如函数名与括号必须要有空格

我们只写一短短的代码就报了3个错误。这是非常烦人的…所以我们最好不要选择ESLint规范，但是代码也要报持一定的规范。

但是如果不小心选择了能不能关闭呢？答案是可以的。在Vue CLI2创建的项目中我们找到config目录下的index.js文件，找到useEslint将值设置为fasle即可关闭

Vue CLI3/4创建的项目把.eslintrc.js文件中的'@vue/standard'删除即可