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 更简单些。

补充重点：在 .vue 文件中的 <template></template> 标签里面的内容不是 HTML 语法，是 XML 语法，因此应遵循 XML 的语法标准。XML 和 HTML 语法差不多，但是 XML 相比于 HTML 要更严格一些，比如在 XML 中有闭合标签一说，且单标签必须闭合，如 <input/> ，但在 HTML 中单标签不闭合是正确的、最新的语法。同时还有一个区别是在 XML 中当标签内没有内容时可直接 / 闭合，如 <div/> ，但在 HTML 中，则不行。严格的 XML 语法比松散的 HTML 语法相比起来更容易编译，因此 Vue 就选择了 XML 语法

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