浅析Vue的两个版本

1,011 阅读2分钟

【前言】

其实我们使用Vue的时候,有两个不同的版本,它们分别是Vue完整版(vue.js)和Vue非完整版(vue.runtime.js),这篇文章就来简单的介绍一下Vue两个版本的区别和使用方法。

【目录】

  1. 版本区别
  2. 配置
  3. 用法区别
  4. codesandbox 写 Vue 代码
  5. 总结

【正文】

1.版本区别

Vue.js(完整版)

优点:编译器可以将含有占位符{{}}或者条件语句变成真实的DOM节点,可以从HTML得到视图,

缺点:编译器体积大,占文件的30%

Vue.runtime.js

优点:没有compiler的,所以体积小

缺点:没有compiler,不能将HTML变成节点,需要用JS构建视图

2.配置

官方文档

Vue.js(完整版):从CDM引用vue.js或Vue.min.js

Vue.runtime.js:默认使用

3.用法区别

完整版的视图是写在HTML里或template选项的,由于有 compiler(编译器)的存在,完整版运行时:用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

非完整版的视图是鞋子啊render里的,是用h函数来创建标签。非完整版运行时:当使用 vue-loader 或 vueify 的时候,*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的,所以只用运行时版本即可。

// 完整版需要编译器
new Vue({
 template: '<div>{{ hi }}</div>'
})
// 非完整版不需要编译器
new Vue({
 render (h) {
   return h('div', this.hi)
 }
})

4.用codesandbox 写 Vue 代码

5.总结

虽然有两个版本,但现在前端基本是不会用完整版的,平时使用默认都是代码体积小的非完整版,因为编译器的脏活交给vue-loader去做了。 选择非完整版的理由如下:

保证用户体验,用户下载的JS文件体积更小,但只支持h函数

保证开发体验,开发者可直接在vue文件里写HTML标签,而不写 h函数

活让loader做,vue-loader 会把vue文件里的HTML转为h函数,这样我不用写太多麻烦的

h函数就可做到和完整版一样的事,还更节约文件大小,提升用户体验

以上就是Vue两个版本的区别和使用方法(其实也没说使用方法哈,大家有兴趣自己去vue官网看一看吧 对不同构建版本的解释