Vue和它的两个版本们

写在前面

刚刚开始接触Vue，接下来会在思否一直更新关于Vue的学习的相关知识，不得不夸奖一下的是Vue的官方文档写的是真好，还贴心地配有视频讲解，真心以为给力。

插播话题之min

在切入正题前先插播一个话题就是不管什么库文件，都分为 min 版和非 min 版，如 vue.js和 vue.min.js，咱们在作项目时通常引用的是 min 版，顾名思义就是占最小内存版，两者的内容是彻底同样的，只是一个非 min 版是有格式的文件，min 版是将全部格式都压缩成一行连在一块儿了，看起来有点丑很差查看源码和实现。以下所示：

vue.js

vue.min.js

Vue的两个版本

Vue.js分为两个版本，简单来讲就是一个是完整版 vue.js，一个是非完整版 vue.runtime.js。两者主要的区别以下：

1. HTML的书写位置不一样

完整版：

完整版的HTML书写的位置有两个，一个是直接在 *.html 文件中使用 Vue 语法，以下所示：

index.html文件

main.js文件

另一个位置是写在 Vue 实例建立时的 template 选项里，而且该部份内容会彻底覆盖 html 文件中对应的位置，而不是仅仅包含在里面，所以也要加上对象的外层 <div id="app"> </div>以下所示：

index.html文件

main.js文件

非完整版：

非完整版的HTML的书写位置也有两种方式，一个是直接写在 Vue 实例建立时的 render() 函数选项里，遵循createElement函数传参建立元素的形式。以下所示：

index.html文件

main.js文件

这样的render函数里面建立 html元素的方法是否是看起来/写起来都很麻烦，所以，Vue 的做者就帮助咱们以更简单明了的方式提供了 *.vue 文件，经过 vue-loader 在文件编译时将 *.vue 文件转化成对应的 render() 函数里的复杂的建立语法，相比起来，*.vue 文件的语法就清晰明了多了，以下所示：

index.html文件

demo.vue文件

main.js文件

补充：有时候 createElement 也会写成 h，都是建立元素的意思，即 render(h) 和 render(createElement) 是同样的，写 h 更简单些。

2. 是否有 compiler 和 vue-loader

完整版

完整版是必定要有 compiler 即编译器的，编译器的做用就是将 Vue 语句在编译时还原成 html 元素才能在浏览器上渲染出来，完整版的 Vue 是经过编译器来实现的，所以完整版有 compiler 。

因为完整版没有用到 *.vue文件，所以不含有 vue-loader。

非完整版

非完整版用到了 *.vue文件，而 vue-loader 就是将*.vue文件翻译成 render() 函数里元素建立语法的。所以非完整版用到了 vue-loader ，可是没有用到 compiler 即编译器，由于 render() 函数就是渲染 html 元素的，再也不须要编译器。

3. 两者优缺点

完整版

优势：

1. 能够在 html 文件中直接写 Vue 语句，可读性强些

缺点：

1. 体积比非完整版大
2. 耦合性太大，在 html 文件中夹杂 vue 语法，致使各种型文件融合到一块，耦合性大

非完整版

优势：

1. 体积小，非完整版的体积比完整版小了30%多
2. 耦合性低，模块化强

缺点：

1. 目前我不知道。。。

总结

目前 Vue 的使用基本都是非完整版，@vue/cli引入 和 webpack引入 的vue文件都是非完整版。

关于codesandbox.io

这里介绍一个在线写 vue项目 的网站，就是 代码沙盒 ，该网站建立的 vue项目 是使用 @vue/cli 配置的环境，所以使用的是非完整版的 vue文件 。

另外，不要登录该网站能够无限次无偿使用，若是登陆了就只能无偿使用50个项目就要收费了。

该网站写的项目可下载下来，在 File -> export to ZIP