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