和你更深一層瞭解： Vue兩個版本的區別和使用方法

在咱們使用 vue時，咱們能夠引用兩個不一樣版本的 Vue，分別是 Vue完整版（vue.js）和 Vue（vue.runtime.js ）非完整版，那麼它們的區別是什麼呢，今天咱們就來分析下這兩個不一樣版本之間的區別。

一、文件名

二、文件大小

完整版：同時包含編譯器和運行時的版本。

編譯器：用來將模板字符串編譯成爲 JavaScript 渲染函數的代碼。

而非完整版不包含編譯器，體積約比完整版小 30%。

三、視圖

完整版

視圖寫在 HTML裏或者 template選項裏，因爲有 compiler(編譯器)的存在，完整版運行時：用來建立 Vue 實例、渲染並處理虛擬 DOM 等的代碼。基本上就是除去編譯器的其它一切。

非完整版

完整版運行時：當使用 vue-loader 或 vueify 的時候，*.vue 文件內部的模板會在構建時預編譯成 JavaScript。你在最終打好的包裏其實是不須要編譯器的，因此只用運行時版本便可。

// 不須要編譯器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

// 須要編譯器
new Vue({
  template: '<div>{{ hi }}</div>'
})
複製代碼

四、配置

從 webpack 引入,完整版須要配置 alias,非完整版 是默認配置;

從 @vue/cli 引入,完整版須要額外配置,非完整版 是默認配置。

總結

既然這二者有這麼多不一樣,那咱們平時用哪一個版本呢?

固然是用非完整版了,理由以下:

1.保證用戶體驗，用戶下載的JS文件體積更小，但只支持h函數

2.保證開發體驗，開發者可直接在vue文件裏寫HTML標籤，而不寫 h函數

3.活讓loader作，vue-loader 會把vue文件裏的HTML轉爲h函數,這樣我不用寫太多麻煩的 h函數就可作到和完整版同樣的事,還更節約文件大小,提高用戶體驗。

最後,謝謝你們的查看,我是 陳有味 ,若是喜歡個人分享的話,請點贊轉發多多支持.