Vue 全家桶

vue全家桶。

使用過vue的程序員一般這樣評價它，“vue.js兼具angular.js和react.js的優點”。Vue.js 是一個JavaScript MVVM（Model-View-ViewModel）庫，用於漸近式構建用戶界面。它以數據驅動和組件化思想構建，采用自底向上增量開發的設計思想。相比Angular.js，Vue.js API更加簡潔；相比 React + Redux 復雜的架構，Vue.js 上手更加容易。

目錄

一、vue全家桶包括什么

vue-router路由

vuex

vue-resource

構建工具vue-cli

調度工具Devtools

關於UI組件庫

二、vue工程目錄結構

編輯器

三、vue使用簡介

數據代理

vue實例生命周期圖解

四、vue的運行原理

雙向綁定圖解

模板是如何解析的

五、發布前優化

UI組件按需加載

路由懶加載

使用異步組件（動態組件）

圖片壓縮與合並

使用CDN加速vue類庫

壓縮代碼

v-for和v-if不要同時使用 使用Object.freeze凍結大數據 使用Keep-alive標簽優化組件創建 使用Set 在scope中少用元素選擇器 關於template的優化 

---

一、vue全家桶包括什么

vue-router路由

網站：http://router.vuejs.org。使用npm工具來安裝vue-router

npm install vue-router

通過import導入Vue模塊、vue-router模塊及其它組件。

import Vue from’vue’

importRouter from’vue-router’

在使用路由前，必須要通過 Vue.use() 明確地安裝路由功能。

Vue.use(Router)

通過const router= new VueRouter（）定義路由，並傳入對應的配置，包括路徑path和組件components等。

 

image

在使用newVue來創建和掛載vue根實例的時候，記得要通過 router配置參數注入路由。使用router-link：

 

image

有兩種模式：

• hash 模式

• history 模式

vuex

網站：http://vuex.vuejs.org

在vue開發實戰中，多個組件共享數據時，單向數據流的簡潔性很容易被破壞。為解決多個視圖使用同一數據及多個視圖驅動同一數據更新的問題，vuex應運而生。

當網站足夠大時，一個狀態樹下，根的部分字段繁多，解決這個問題就要模塊化 vuex，官網提供了模塊化方案，允許我們在初始化 vuex 的時候配置 modules。每一個 module 里面又分別包含 state 、action 等，看似是多個狀態樹，其實還是基於 rootState 的子樹。細分后整個 state 結構就清晰了，管理起來也方便許多。

 

image

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 的四個核心概念是：

• The state tree：Vuex 使用單一狀態樹，用一個對象就包含了全部的應用層級狀態。至此它便作為一個唯一數據源(SSOT)而存在。這也意味着，每個應用將僅僅包含一個 store 實例。單狀態樹讓我們能夠直接地定位任一特定的狀態片段，在調試的過程中也能輕易地取得整個當前應用狀態的快照。

• Getters：用來從 store 獲取 Vue 組件數據。

• Mutators：事件處理器用來驅動狀態的變化。

• Actions：可以給組件使用的函數，以此用來驅動事件處理器 mutations。（注：此許或許稱之為EventHandler更為恰當。）

Vuex和簡單的全局對象是不同的。當Vuex從store中讀取狀態值的時候，若狀態發生了變化，那么相應的組件也會更新。並且改變store中狀態的唯一途徑就是提交commit mutations。只要發生了狀態的變化，一定伴隨着mutation的提交。 例如：

 

image

通過 store.state 來獲取狀態對象，以及通過 store.commit 方法觸發狀態變更：

 

image

由於 vuex 的靈活性，帶來了編碼不統一的情況，完整的閉環是 store.dispatch('action') -> action -> commit -> mutation -> getter -> computed，實際上中間的環節有的可以省略，因為 API 文檔提供了以下幾個方法 mapState、mapGetters、mapActions、mapMutations，然后在組件里可以直接調取任何一步，還是項目小想怎么調用都可以，項目大的時候，就要考慮 vuex 使用的統一性，有人建議是不論多簡單的流程都跑完整個閉環，形成代碼的統一，方便后期管理，在組件里只允許出現 dispatch 和 mapGetters，其余的流程都在名為 store 的 vuex 文件夾里進行。

注：mapGetters 工具函數會將 store 中的 getter 映射到局部計算屬性中。它的功能和 mapState 非常類似。

vue-resource

網站：https://github.com/pagekit/vue-resource

使用npm來安裝Vue-resource：

$ npm install vue-resource

在安裝並引入vue-resource后，可以基於全局的Vue對象使用http，也可以基於某個Vue實例使用http。

 

image

在發送請求后，使用then方法來處理響應結果，then方法有兩個參數，第一個參數是響應成功時的回調函數，第二個參數是響應失敗時的回調函數。

vue-resource的請求API是按照REST風格設計的，它提供了7種請求API：

· get(url,[options])

· head(url,[options])

· delete(url,[options])

· jsonp(url,[options])

· post(url,[body], [options])

· put(url, [body],[options])

· patch(url,[body], [options])

構建工具vue-cli

vue-cli是vue標准的開發工具。網站：https://cli.vuejs.org/

安裝

npm install -g @vue/cli

最新版本為3.4.0。

創建項目

vue create my-project

以上是命令行創建。也可以通過 vue ui 命令以圖形化界面創建和管理項目：

vue ui

運行

npm run serve

調度工具Devtools

vue在調試方面，可以選擇安裝chrome插件vue Devtools。打開vue項目，在調試vue應用的時候，chrome開發者工具中會看一個vue的一欄，點擊之后就可以看見當前頁面vue對象的一些信息。

 

image

在Devtools工具中，可以選擇組件，查看對應組件內的數據信息。也可以選擇Vuex選項，查看該項目內Vuex的狀態變量信息。

 

image

關於UI組件庫

可以自己寫，為提高開發效率也可以復用第三方組件庫。element（https://github.com/ElemeFE/element）是一個最好支持vue2.0的UI組件庫。

二、vue工程目錄結構

這是一個簡單的vue項目的大概結構：

 

image

• components/文件夾：用來存放Vue 組件。個人建議，把每一個組件中使用到的image圖片放置到對應的組件子文件目錄下，便於統一的管理

• Node_modules/：npm安裝的該項目的依賴庫

• vuex/文件夾：存放的是和 Vuex store 相關的東西（state對象，actions，mutations)

• router/文件夾：存放的是跟vue-router相關的路由配置項

• build/文件：是 webpack 的打包編譯配置文件

• static/文件夾：存放一些靜態的、較少變動的image或者css文件

• config/文件夾：存放的是一些配置項，比如服務器訪問的端口配置等

• dist/該文件夾：一開始是不存在，在我們的項目經過 build 之后才會產出

• App.vue根組件，所有的子組件都將在這里被引用

• index.html整個項目的入口文件，將會引用我們的根組件 App.vue

• main.js入口文件的 js 邏輯，在webpack 打包之后將被注入到 index.html 中

編輯器

VSCode with Vetur

 

image

三、vue使用簡介

數據代理

每個 Vue.js 應用都是通過構造函數 Vue 創建一個 Vue 的根實例 啟動的。每個 Vue 實例都會代理其 data 對象里所有的屬性：

var data = { a: 1 }

var vm = new Vue({

data: data

})

vm.a === data.a // -> true

設置新值也會同步影響：

vm.a = 2

data.a // -> 2

// ... 反之亦然

data.a = 3

vm.a // -> 3

實現數據代理的偽代碼如下：

var self = this; // this為vue實例， 即vm

Object.keys(this.data).forEach(function(key) {

Object.defineProperty(this, key, { // this.title, 即vm.title enumerable: false, configurable: true, get: function getter () { return self.data[key]; //觸發對應data[key]的getter }, set: function setter (newVal) { self.data[key] = newVal; //觸發對應data[key]的setter } }); 

}

Vue 實例暴露了一些有用的實例屬性與方法。這些屬性與方法都有前綴 $，以便與代理的 data 屬性區分。例如：

vm.$data === data // -> true

vm.$el === document.getElementById('example') // -> true

vue實例生命周期圖解

 

 

image

 

四、vue的運行原理

Vue采用簡潔的模板語法，以聲明的方式將數據渲染進 DOM。vue代碼是沒有辦法直接被瀏覽器解析的，必須經過“編譯”，變為瀏覽器可以識別為html、js與css代碼。這種聲明式開發方式把方便留給了程序員，轉換工作交給了自動化工具。

 

image

注：el是element的縮寫，指Vue實例掛載的元素節點。

雙向綁定圖解

一般說的雙向綁定，指：

• 數據變動 --> 視圖更新

• 視圖更新 --> 數據變動

視圖更新 --> 數據變動，這個方向的綁定比較簡單。主要通過事件監聽來改變數據，比如input控件可以監聽input事件，一旦事件觸發，調用JS改變data。

 

image

模型層(model)只是普通 JavaScript 對象，修改它，DOM本是不能更新的。當程序員把一個普通 JavaScript 對象傳給 Vue 實例的 data 選項，Vue 將遍歷此對象所有的屬性，並使用 Object.defineProperty 把這些屬性全部轉為 getter/setter。在每個setter中，可以做許多事件，使表面看起來數據變了，視圖就更新了。並且這種數據更新，和原來一樣，只是 vm.a=123 這樣的簡單更新。

 

image

如上所求，每個vue組件實例都有相應的 watcher 實例對象，它會在vue組件渲染的過程中把需要用到的屬性（getter）記錄為依賴。之后，當依賴項的 setter 被（其它JS代碼）調用時，setter 會通知 watcher 重新計算，從而致使它關聯的組件得以更新。

此處實現的是一個觀察者模式。

通過object.defineProperty遍歷設置this.data里面所有屬性，在每個屬性的setter里面去通知對應的回調函數，這里的回調函數包括dom視圖重新渲染的函數、使用$watch添加的回調函數等，這樣我們就通過object.defineProperty劫持了數據，當我們對數據重新賦值時，如this.title = 'hello vue',就會觸發setter函數，從而觸發dom視圖重新渲染的函數，實現數據變動，對應視圖更新。

那么，如何在setter里面觸發所有綁定該數據的回調函數呢？

既然綁定該數據的回調函數不止一個，我們就把所有的回調函數放在一個數組里面，一旦觸發該數據的setter，就遍歷數組觸發里面所有的回調函數，我們把這些回調函數稱為訂閱者。數組最好就定義在setter函數的最近的上級作用域中，如下面實例代碼所示。

> Object.keys(this.data).forEach(function(key) { > > var subs = []; // 在這里放置添加所有訂閱者的數組 > > Object.defineProperty(this.data, key, { // this.data.title > > enumerable: false, > > configurable: true, > > get: function getter () { > > console.log('訪問數據啦啦啦') > > return this.data[key]; //返回對應數據的值 > > }, > > set: function setter (newVal) { > > if (newVal === this.data[key]) { > > return; // 如果數據沒有變動，函數結束，不執行下面的代碼 > > } > > this.data[key] = newVal; //數據重新賦值 > > subs.forEach(function () { > > // 通知subs里面的所有的訂閱者 > > }) > > } > > }); > > } 

那么，怎么把綁定數據的所有回調函數放到一個數組里面呢？這是通過gettter內部的代碼完成的。

我們知道只要訪問數據就會觸發對應數據的getter，那我們可以先設置一個全局變量target，如果我們要在data里面title屬性添加一個訂閱者(changeTitle函數)，我們可以先設置target = changeTitle，把changeTitle函數緩存在target中，然后訪問this.title去觸發title的getter，在getter里面把target這個全局變量的值添加到subs數組里面，添加完成后再把全局變量target設置為null，以便添加其他訂閱者。

偽代碼如下：

> target = changeTitle
> 
> ...
> 
> Object.keys(this.data).forEach(function(key) { > > var subs = []; // 在這里放置添加所有訂閱者的數組 > > Object.defineProperty(this.data, key, { // this.data.title > > enumerable: false, > > configurable: true, > > get: function getter () { > > console.log('訪問數據啦啦啦') > > if (target) { > > subs.push(target); > > } > > return this.data[key]; //返回對應數據的值 > > }, > > set: function setter (newVal) { > > if (newVal === this.data[key]) { > > return; // 如果數據沒有變動，函數結束，不執行下面的代碼 > > } > > this.data[key] = newVal; //數據重新賦值 > > subs.forEach(function () { > > // 通知subs里面的所有的訂閱者 > > }) > > } > > }); > > } 

上面代碼中提到的changeTitle，即是上面最近一張圖解中的watcher。vue通過getter收集watcher集合。因為vue充許在運行時添加代碼，所以該收集行為不能僅限制於模板“編譯”之前。（注：vue中是不存在嚴格的編譯的，js是解析執行型語言，像C、Go等語言將源碼編譯為目標平台的二進制文件，才是真的編譯。）

模板是如何解析的

假如說有下面這一段代碼，我們怎么把它解析成對應的html呢？

> <input v-model="title"> > > <h1>{{title}}</h1> > > <button v-on:click="changeTitle">change title<button> 

注：該示例實現的效果是，在input輸入框內輸入任何內容，下方h1文本同步更新。

先簡單介紹視圖更新函數的用途，比如解析指令v-model="title",v-on:click="changeTitle",還有把{{title}}替換為對應的數據等。

回到上面那個問題，如何解析模板？我們只要去遍歷所有dom節點包括其子節點：

• 如果節點屬性含有v-model，視圖更新函數就為把input的value設置為title的值

• 如果節點為文本節點，視圖更新函數就為先用正則表達式取出大括號里面的值'title'，再設置文本節點的值為data['title']

• 如果節點屬性含有v-on:xxxx，視圖更新函數就為先用正則獲取事件類型為click，然后獲取該屬性的值為changeTitle，則事件的回調函數為this.methods['changeTitle']，接着用addEventListener監聽節點click事件。

五、發布前優化

使用vue-cli部署生產包時，發現資源包很大，打包后的vendor.js達到了1M+。

UI組件按需加載

如果使用了第三方組件/UI庫，如element-ui, mint-ui,echarts等，如果全部引入，項目體積非常大，這時可以按需引入組件。

安裝 babel-plugin-component

npm install babel-plugin-component -D

然后，將.babelrc 修改為：

> {
> 
>   "presets": [["es2015", { "modules": false }]], > "plugins": [ > [ > "component", > { > "libraryName": "element-ui", > "styleLibraryName": "theme-chalk" > } > ] > ] > } 

然后引入部分組件，這樣一來，就不需要引入樣式了，插件會幫我們處理。

> // main.js > import Vue from 'vue' > import { Dialog, Loading } from 'element-ui' > Vue.use(Dialog) > Vue.use(Loading.directive) > Vue.prototype.$loading = Loading.service > // 然后正常使用組件 

注：Babel是一個廣泛使用的轉碼器，可以將ES6代碼轉為ES5代碼。讓不支持ES6的宿主環境，支持使用一套源碼開發。

mint-ui是element-ui的移動端組件，所以它的使用和引入幾乎和element-ui一樣。

路由懶加載

vue-router官方推薦syntax-dynamic-import插件，不過它要求同時安裝@bable/core^7.0.0，如果你安裝了babel-core6，可能有版本沖突的，解決方法如下：

npm install babel-plugin-syntax-dynamic-import --save-dev(^6.18.0)

當打包構建應用時，Javascript 包會變得非常大，影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了。結合 Vue 的異步組件和 Webpack 的代碼分割功能，輕松實現路由組件的懶加載。

> // router.js > const login = () => import('@/components/login') > const router = new VueRouter({ > routes: [ > { path: '/login', component: login } > ] > }) 

還有一種魔法注釋用法，不推薦使用。

使用異步組件（動態組件）

app bundle 文件過大，可以嘗試通過組件懶加載優化。

動態組件主頁面加載是不會加載，等到觸發條件時才加載該組件，並且加載一次后就有緩存。如果組件在頁面加載時不需要，只在調用時用到，這時可以使用異步組件的寫法。僅僅是引入和組件注冊寫法不同：

> // template > <test v-if="showTest"></test> > > // script > > components: { > test: () => import('./test') // 將組件異步引入，告訴webpack，將該部分代碼分割打包 > }, > > methods:{ > clickTest () { > this.showTest = !this.showTest > } > } 

圖片壓縮與合並

無損壓縮圖片：https://tinypng.com/。可以將圖片制成雪碧精靈圖。

使用CDN加速vue類庫

一般項目里用到的第三方js庫主要有：vue、vue-router、vuex、vue-resource、axio、qiniu等。這些依賴庫的js文件被一起打包到vender那個js文件里面，導致vender這個文件很大，那首屏加載速度肯定會被拖慢。

類庫文件使用cdn加速

> <!-- built files will be auto injected --> > > <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> > > <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> > > <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script> > > <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script> 

修改 build/webpack.base.conf.js

> module.exports = { > > context: path.resolve(__dirname, '../'), > > entry: { > > app: './src/main.js' > > }, > > externals:{ > > 'vue': 'Vue', > > 'vue-router': 'VueRouter', > > 'vuex':'Vuex', > > 'vue-resource': 'VueResource' > > } 

排除已經手動收入的js文件

利用webpack的externals。具體做法就是在 build/webpack.base.conf.js文件的module里面與rules同層加入externals。具體做法，修改src/main.js src/router/index.js 注釋掉import引入的vue,vue-resource等：

> // import Vue from 'vue' > > // import VueResource from 'vue-resource' > > // Vue.use(VueResource) 

上面已經引用過。

壓縮代碼

vue-cli已經使用UglifyJsPlugin 插件來壓縮代碼，可以設置成如下配置：

> new webpack.optimize.UglifyJsPlugin({ > > compress: { > > warnings: false, > > drop_console: true, > > pure_funcs: ['console.log'] > > }, > > sourceMap: false > > }) 

其中sourceMap: false是禁用除錯功能。如果設為true，在部署包中會生成.map結尾的js文件。它用於在代碼混淆壓縮的情況下仍可進行調試。這個功能雖好，但會大大增加整體資源包的體積，所以將其禁用。

v-for和v-if不要同時使用

在vue中v-for和v-if不要放在同一個元素上使用。由於 v-for 和 v-if 放在同一個元素上使用會帶來一些性能上的影響，在計算屬性上過濾之后再進行遍歷。反例：

 

image

使用Object.freeze凍結大數據

對於前端純大數據展示（純大數據指：拿到數據就是直接用於展示的，不需要做修改其中字段等處理的，而且數據量比較大）的情況下，使用Object.freeze方法來包裹變量，那邊vue內部不會使用defineproperty去監聽數據內部的變化，只有本身變化時才會觸發，在大量數據的情況下，vue內部不在去監聽數據的變化會提高性能。使用demo如下：

 

image

使用Keep-alive標簽優化組件創建

vue提供了keep-alive標簽來存儲緩存，對於一些視頻控件object或圖表類的使用，我們經常會使用v-if指令，而v-if是會創建和銷毀的，如果頻繁操作在ie下的內存會持續上升，而keep-alive可以有效的緩存，抑制內存的持續上升。

見：https://cn.vuejs.org/v2/api/#keep-alive

使用Set

Es6集合Set()可優化遍歷速度，set集合是可用於查找該集合內是否存在某個元素。但如果使用了Bable自動轉化，該優化無效。

在scope中少用元素選擇器

scope中元素選擇器盡量少用。在 scoped 樣式中，類選擇器比元素選擇器更好，因為大量使用元素選擇器是很慢的。

為了給樣式設置作用域，Vue 會為元素添加一個獨一無二的特性，例如 data-v-f3f3eg9。然后修改選擇器，使得在匹配選擇器的元素中，只有帶這個特性才會真正生效 (比如 button[data-v-f3f3eg9])。問題在於大量的元素和特性組合的選擇器 (比如 button[data-v-f3f3eg9]) 會比類和特性組合的選擇器 慢，所以應該盡可能選用類選擇器。

關於template的優化

v-show，v-if 用哪個？在我來看要分兩個維度去思考問題，第一個維度是權限問題，只要涉及到權限相關的展示無疑要用 v-if，第二個維度在沒有權限限制下根據用戶點擊的頻次選擇，頻繁切換的使用 v-show，不頻繁切換的使用 v-if，這里要說的優化點在於減少頁面中 dom 總數，我比較傾向於使用 v-if，因為減少了 dom 數量，加快首屏渲染，至於性能方面我感覺肉眼看不出來切換的渲染過程，也不會影響用戶的體驗。

不要在模板里面寫過多的表達式與判斷 v-if="isShow && isAdmin && (a || b)"，這種表達式雖說可以識別，但是不是長久之計，當看着不舒服時，適當的寫到 methods 和 computed 里面封裝成一個方法，這樣的好處是方便我們在多處判斷相同的表達式，其他權限相同的元素再判斷展示的時候調用同一個方法即可。

循環調用子組件時添加 key，key 可以唯一標識一個循環個體，可以使用例如 item.id 作為 key，假如數組數據是這樣的 ['a' , 'b', 'c', 'a'],使用 :key="item" 顯然沒有意義，更好的辦法就是在循環的時候 (item, index) in arr，然后 :key="index"來確保 key 的唯一性。