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()
手动地挂载一个未挂载的实例。也就是说
m
o
u
n
t
(
)
方
法
的
参
数
是
一
个
选
择
器
,
mount()方法的参数是一个选择器,
mount()方法的参数是一个选择器,mount(’#app’)是将id为app
DOM元素挂载到我们的Vue实例中,效果和el一样
ESLint规范
当我们使用Vue CLI创建项目是,如果选择了ESLint规范,就会对我们的代码进行检查。
不符合规范的则会提示报错。例如函数名与括号必须要有空格
我们只写一短短的代码就报了3个错误。这是非常烦人的…所以我们最好不要选择ESLint规范,但是代码也要报持一定的规范。
但是如果不小心选择了能不能关闭呢?答案是可以的。在Vue CLI2创建的项目中我们找到config
目录下的index.js
文件,找到useEslint
将值设置为fasle
即可关闭
Vue CLI3/4创建的项目把.eslintrc.js
文件中的'@vue/standard'
删除即可
以上是 Vue项目使用细节 的全部内容, 来源链接: utcz.com/z/376744.html