Vue 3.0 和 Vue 2.0的對比以及Vue 2.0精講以及Vue全家桶精講

前言

        最近在整理Vue的一些內容,包括Vue 3.0新特性,Vue 2.0的一些特性以及實現方法,還有Vue全家桶的內容,涉及到的內容較多因此找個機會發篇文章,把要點所有講出來.綜合整理下這樣看着也舒服,好了廢話很少說開始開始.

正文

1  Vue 3.0 和 Vue 2.0的對比

1.1  Vue 3.0的新特性以及原理

1.1.1  觀察機制

        簡述：更完備、更精準、更高效，能夠對響應式跟蹤進行調試，新增了一個建立可觀察對象（observable）的 API。

        3.0 版本里將有一個基於 Proxy 的觀察者，它會提供全語言覆蓋的響應式跟蹤。相比於 2.x 版本里基於 Object.defineProperty 的觀察者，新的實現更增強大：

能夠檢測屬性的新增和刪除

能夠檢測數組索引的變化和 length 的變化

支持 Map、Set、WeakMap 和 WeakSet

        上面正文中提到的Proxy算是此次Vue 3.0 最大的亮點,它不只取代了Vue 2.0 的 Object.defineProperty 方法而且組建生成增快 100%還有就是快一倍 / 減小通常的內存使用

        下面看一個最簡單的Proxy實現方法:

let obj = {
    	a : 1
}
let proxyObj = new Proxy(obj,{
    get : function (target,prop) {
        return prop in target ? target[prop] : 0
    },
    set : function (target,prop,value) {
        target[prop] = 888;
    }
})
    
console.log(proxyObj.a);        // 1
console.log(proxyObj.b);        // 0

proxyObj.a = 666;
console.log(proxyObj.a)         // 888
複製代碼

        上述例子中，咱們事先定義了一個對象 obj , 經過 Proxy 構造器生成了一個 proxyObj 對象，並對其的 set(寫入) 和 get (讀取) 行爲從新作了修改。

        當咱們訪問對象內本來存在的屬性時，會返回原有屬性內對應的值，若是試圖訪問一個不存在的屬性時，會返回0 ，即咱們訪問 proxyObj.a 時，本來對象中有 a 屬性，所以會返回 1 ，當咱們試圖訪問對象中不存在的 b 屬性時，不會再返回 undefined ，而是返回了 0 ，當咱們試圖去設置新的屬性值的時候，老是會返回 888 ，所以，即使咱們對 proxyObj.a 賦值爲 666 ，可是並不會生效，依舊會返回 888!

        想要了解更多Proxy就去這裏看看阮一峯大大的ECMAScript 6 入門: es6.ruanyifeng.com/#docs/proxy

新的觀察者還有如下特色：

提供了一個建立可觀察對象的 API。對於中小型應用來講，這個 API 能提供一個輕量、簡單的跨組件狀態管理方案。

不可變的可觀察對象（Immutable observable）。咱們能夠給一個值建立多個不可變的版本，以防有人修改其屬性，必需要在系統在內部臨時將其解鎖時才能修改其屬性。這個機制可以用於凍結傳給子組件的屬性或者凍結 Vuex 狀態樹以外的狀態變動。

更強大的 debug 能力。咱們使用新的 renderTracked 和 renderTriggered 鉤子來精確地查明一個組件的 render 是在何時由誰觸發的。

很容易知道爲何一個組件會從新渲染

1.1.2  其餘的運行時加強

        簡述：體積更小、速度更快，支持 tree-shaking，支持 fragment 和 portal，支持自定義 render。

        體積更小。新的代碼庫在設計的時候就考慮了 tree-shaking。內置的組件（如 ）和內置的指令（v-model）是按需引入的，支持 tree-shaking。新的運行時最小體積將低於 10kb（gzip以後）。除此以外，因爲不少特性是支持 tree-shaking 的，因此咱們能夠提供更多的內置特性，若是你不想用這些特性，你的代碼體積徹底不會增長。另外在這裏說一嘴,Vue 2.0 體積是Vue 3.0 的一倍

        速度更快，包括虛擬 DOM 的掛載和更新、組件實例的初始化和觀察者的建立。3.0 版本將讓你的應用啓動時間減小一半。

        支持 fragment 和 portal。雖然體積變小了，可是 3.0 版本仍是帶來了新功能，那就是支持 Fragment（一個組件包含多個根節點）和 Portal（在 DOM 中渲染一個 subtree，而不須要在一個組件中）。

        插槽機制加強。全部由編譯產生的插槽如今都是函數，這些函數會在子組件的 render 調用時被調用。這樣一來，插槽中的依賴會被認爲是子組件的依賴而不是父組件的依賴。這意味着：一、當插槽內容變化時，只有子組件從新渲染；二、當父組件從新渲染時，若是插槽內容沒有變化，子組件就不須要從新渲染。這個特性提供了更精確的組件樹層面上的變動檢測，因此會減小不少無用的渲染。

        自定義 render。咱們會提供一個 API 用來建立自定義的 render，所以你不須要爲了自定義一些功能而 fork Vue 的代碼。這個特性給 Weex 和 NativeScript Vue 這樣的項目提供了不少便利。

>1.1.3  編譯器加強

        簡述：編譯出的內容對 tree-shaking 友好，更多 AOT 優化，更好的錯誤提示，對 source map 的支持更好。

        爲了輸出對 tree-shaking 友好的代碼，模板中若是用到了一些可選特性，那麼生成的代碼中將使用 ES 模塊語法來 import 這些特性。所以沒有用到的可選特性就不會出如今最終代碼中。

        因爲對虛擬 DOM 進行了優化，因此有了更高效的編譯時優化，好比靜態樹提高、靜態屬性提高、爲運行時添加編譯提示信息以減小子節點正常化（children normalization），VNode 建立的快速路徑等。

        重寫解析器（parser），以在模板編譯錯誤提示中添加位置信息。這也會使得 Vue 支持模板的 source map。新的解析器能夠提供給第三方工具使用，好比 eslint-plugin-vue 和 IDE。

1.2  Vue 3.0和Vue 2.0 的對比

        1. 默認進行懶觀察（lazy observation）。在 2.x 版本里，不過數據多大，都會在一開始就爲其建立觀察者。當數據很大時，這可能會在頁面載入時形成明顯的性能壓力。3.x 版本，只會對「被用於渲染初始可見部分的數據」建立觀察者，並且 3.x 的觀察者更高效。

        2. 更精準的變動通知。比例來講：2.x 版本中，你使用 Vue.set 來給對象新增一個屬性時，這個對象的全部 watcher 都會從新運行；3.x 版本中，只有依賴那個屬性的 watcher 纔會從新運行。

        暫時來說,Vue 3.0 和 Vue 2.0 中間雖然api沒有什麼特別大的變化,可是相對於原理而言Vue 3.0 使用了TypeScript進行重構以後各方面的性能提高都有了一個重大突破(相對於2.0來講),另外這個工做已近從2.6版本漸漸開始了,雖然提高效果不是很明顯,可是我相信Vue3.0能給咱們帶來更大的驚喜.

2  Vue 2.0精講

2.1 MVVM框架和普通框架的區別以及Vue2.0實現的方式

2.1.1 MVVM框架

        首先咱們先得了解什麼事MVVM框架,它又和普通的框架有什麼區別(Jquery):

        mvvm 是 model + view + viewmodel 框架，經過 viewmodel 鏈接數據模型model 和 view

        Vue是以數據爲驅動的，Vue自身將DOM和數據進行綁定，一旦建立綁定，DOM和數據將保持同步，每當數據發生變化，DOM會跟着變化。

        ViewModel是Vue的核心，它是Vue的一個實例。Vue實例時做用域某個HTML元素上的，這個HTML元素能夠是body，也能夠是某個id所指代的元素。

        DOM Listeners和Data Bindings是實現雙向綁定的關鍵。DOM Listeners監聽頁面全部View層DOM元素的變化，當發生變化，Model層的數據隨之變化；Data Bindings監聽Model層的數據，當數據發生變化，View層的DOM元素隨之變化。

2.1.2 MVVM框架和普通框架的區別

        區別：vue 是數據驅動，經過數據來顯示視圖層而不是節點操用

2.1.3 Vue2.0實現的方式以及雙向綁定js實現例子

        既然知道其中的區別就讓咱們看看vue雙向綁定的原理是什麼,簡單用一句話歸納就是:

        vue.js 是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調。

js實現簡單的雙向綁定

<body>
    <div id="app">
    <input type="text" id="txt">
    <p id="show"></p>
</div>
</body>
<script type="text/javascript">
    var obj = {}
    Object.defineProperty(obj, 'txt', {
        get: function () {
            return obj
        },
        set: function (newValue) {
            document.getElementById('txt').value = newValue
            document.getElementById('show').innerHTML = newValue
        }
    })
    document.addEventListener('keyup', function (e) {
        obj.txt = e.target.value
    })
</script>
複製代碼

2.2 Vue的生命週期以及適用場景

2.2.1 Vue的生命週期

        既然講了原理咱們就不得不談談Vue的特點生命週期:

        首先總共分爲8個階段建立前/後，載入前/後，更新前/後，銷燬前/後,下面就看看官方講解:

建立前/後:

        beforeCreate（建立前） 在數據觀測和初始化事件還未開始

        created（建立後） 完成數據觀測，屬性和方法的運算，初始化事件，$el屬性尚未顯示出來

載入前/後

        beforeMount（載入前） 在掛載開始以前被調用，相關的render函數首次被調用。實例已完成如下的配置：編譯模板，把data裏面的數據和模板生成html。注意此時尚未掛載html到頁面上。。

        mounted（載入後） 在el 被新建立的 vm.$el 替換，並掛載到實例上去以後調用。實例已完成如下的配置：用上面編譯好的html內容替換el屬性指向的DOM對象。完成模板中的html渲染到html頁面中。此過程當中進行ajax交互。

更新前/後

        beforeUpdate（更新前） 在數據更新以前調用，發生在虛擬DOM從新渲染和打補丁以前。能夠在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。

        updated（更新後） 在因爲數據更改致使的虛擬DOM從新渲染和打補丁以後調用。調用時，組件DOM已經更新，因此能夠執行依賴於DOM的操做。然而在大多數狀況下，應該避免在此期間更改狀態，由於這可能會致使更新無限循環。該鉤子在服務器端渲染期間不被調用。

銷燬前/後

        beforeDestroy（銷燬前） 在實例銷燬以前調用。實例仍然徹底可用。

        destroyed（銷燬後） 在實例銷燬以後調用。調用後，全部的事件監聽器會被移除，全部的子實例也會被銷燬。該鉤子在服務器端渲染期間不被調用。

        總結來說什麼事vue的生命週期:

        Vue 實例從建立到銷燬的過程，就是生命週期。從開始建立、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、銷燬等一系列過程，稱之爲 Vue 的生命週期。另外呢這裏再跟你們嘮嘮生命週期在第一次頁面加載的時候會觸發 beforeCreate, created, beforeMount, mounted 這幾個鉤子,而且DOM 渲染在 mounted 中就已經完成了,這樣你們是否是更好理解一些呢

2.2.1 Vue的生命週期適合那些場景

        生命週期鉤子的一些使用方法： beforecreate : 能夠在這加個loading事件，在加載實例時觸發 created : 初始化完成時的事件寫在這裏，如在這結束loading事件，異步請求也適宜在這裏調用 mounted : 掛載元素，獲取到DOM節點 updated : 若是對數據統一處理，在這裏寫上相應函數 beforeDestroy : 能夠作一個確認中止事件的確認框 nextTick : 更新數據後當即操做domarguments是一個僞數組，沒有遍歷接口，不能遍歷。

2.3 Vue指令

        Vue分爲內部指定指令和自定義指令.

2.3.1 Vue內部指令

        簡單來說vue內部指令有這些v-for 、 v-if 、v-bind、v-on、v-show、v-else不是很全面可是用的最多的就是這些了.

        而後包括修飾符.prevent: 提交事件再也不重載頁面；.stop: 阻止單擊事件冒泡；.self: 當事件發生在該元素自己而不是子元素的時候會觸發；.capture: 事件偵聽，事件發生的時候會調用這些也會在項目中常常用到.

        另外呢v-on能夠綁定多個事件還有就是v-show指令，v-if的區別在於:

        條件渲染指令，與v-if不一樣的是，不管v-show的值爲true或false，元素都會存在於HTML代碼中；而只有當v-if的值爲true，元素纔會存在於HTML代碼中。v-show指令只是設置了元素CSS的style值

        v-bind算是雙向綁定時會用到,另外v-for在循環加載列表時會使用,另外多說一嘴v-for有一個key的值,它的做用以下:

        當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用「就地複用」策略。若是數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序， 而是簡單複用此處每一個元素，而且確保它在特定索引下顯示已被渲染過的每一個元素。key的做用主要是爲了高效的更新虛擬DOM。

        修飾符就很少作解釋,你們能夠去看看官網的解釋:

        vue官網:

        vue中文官網

        cn.vuejs.org/v2/guide/in…

2.3.2 Vue自定義指令

        全局定義指令：在vue對象的directive方法裏面有兩個參數，一個是指令名稱，另一個是函數。組件內定義指令：directives
        鉤子函數：bind（綁定事件觸發）、inserted(節點插入的時候觸發)、update（組件內相關更新）
        鉤子函數參數：el、binding

2.4 Vue計算屬性以及watch監聽

        在模板中放入太多的邏輯會讓模板太重且難以維護，在須要對數據進行復雜處理，且可能屢次使用的狀況下，儘可能採起計算屬性的方式。好處：①使得數據處理結構清晰；②依賴於數據，數據更新，處理結果自動更新；③計算屬性內部this指向vm實例；④在template調用時，直接寫計算屬性名便可；⑤經常使用的是getter方法，獲取數據，也可使用set方法改變數據；⑥相較於methods，無論依賴的數據變不變，methods都會從新計算，可是依賴數據不變的時候computed從緩存中獲取，不會從新計算。下面是計算屬性基礎的例子:

<div id="app">
    <input v-model = "lastName" >
    <input v-model = "firstName" >
    {{ quanming }}
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: '健',
            lastName: '吳'
        },
        computed: {
            quanming:{
                get:function(){
                    return this.lastName + this.firstName
                }
            }
        }
    });
</script>
複製代碼

        而vue中的watch是一個比較重要的概念，經過他咱們能夠檢測data的變化,下面是一個簡單的例子:

<div id="app">
    <input v-model = "lastName" >
    <input v-model = "firstName" >
    {{ fullName }}
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: '健',
            lastName: '吳',
            fullName: '吳健'
        },
        watch: {
            firstName: function (val) {
                this.fullName = this.lastName + val
            },
            lastName: function (val) {
                this.fullName = val + this.firstName
            }
        }
    });
</script>
複製代碼

        另外呢watch屬性是咱們經常使用的因此我就具體講講它的的高級用法--監聽對象的屬性變化:

        1.監聽對象須要深度監聽 ,以下代碼能夠監聽整個msg對象的變化

watch: {
  msg: {
    handler(newValue, oldValue) {
      console.log(newValue)
    },
    deep: true
  }
}
複製代碼

        2.監聽對象裏面某個屬性的變化，經過computed作中間層實現

computed: {
 channel() {
   return this.msg.channel
 }
},
watch:{
    channel(newValue, oldValue) {
    console.log('new: %s, old: %s', newval, oldVal)
    //這裏面能夠執行一旦監聽的值發生變化你想作的操做
  }
}
複製代碼

2.5 Vue組件

        vue中有兩個比較重要的概念一個是數據驅動上面咱們有講到過,一個就是組件機制,接下來就詳細介紹下Vue的組件

2.5.1 Vue引入組件的步驟

        1.採用ES6的import ... from ...語法或CommonJS的require()方法引入組件

        2.對組件進行註冊,代碼以下注冊:
        Vue.component('my-component', {
        template: '

A custom component!

'
        })

        3.使用組件

        下面貼個小例子:

Vue.component('componentName',{
    /*component*/ 
})；   
// 這裏注意一點，組件要先註冊再使用
Vue.component('mine',{           
    template:'#mineTpl',          
    props:['name','title','city','content']        
}); 
var v=new Vue({      
    el:'#vueInstance',      
    data:{          
        name:'zhang',          
        title:'this is title',         
        city:'Beijing',         
        content:'these are some desc about Blog'     
    }
});
複製代碼

2.5.2 如何讓CSS只在當前組件中起做用

        將當前組件的< style >修改成< style scoped >

2.5.3 組件中的 keep-alive 做用是什麼

        < keep-alive >< /keep-alive > 包裹動態組件時，會緩存不活動的組件實例,主要用於保留組件狀態或避免從新渲染。

        大白話: 好比有一個列表和一個詳情，那麼用戶就會常常執行打開詳情=>返回列表=>打開詳情…這樣的話列表和詳情都是一個頻率很高的頁面，那麼就能夠對列表組件使用進行緩存.

        這樣用戶每次返回列表的時候，都能從緩存中快速渲染，而不是從新渲染

2.5.4 Vue組件封裝的過程(文字描述)

        首先，組件能夠提高整個項目的開發效率。可以把頁面抽象成多個相對獨立的模塊，解決了咱們傳統項目開發：效率低、難維護、複用性等問題。

        而後，使用Vue.extend方法建立一個組件，而後使用Vue.component方法註冊組件。子組件須要數據，能夠在props中接受定義。而子組件修改好數據後，想把數據傳遞給父組件。能夠採用emit方法。

2.6 組件之間的通訊

2.6.1 父子組件之間的通訊

        父組件與子組件傳值：Props

        子組件向父組件傳遞數據: 子組件經過$emit方法傳遞參數,觸發父組件event

2.6.2 Bus方法通訊

        這個能夠去看看我以前寫的關於Bus通信的文章:

        Vue eventbus 使用中的重複觸發解決方案及存在的Bug

        另外呢關於vuex通訊咱們放在下面講解

2.7 Vue與Angular以及React的區別

        組件基本上算是全面歸納了一下,另外呢Vue和其餘兩大框架Angular以及React有什麼區別呢,咱們接下來就來說講.

2.7.1 vue與angular的區別以及angular髒檢查理解

2.7.1.1 vue與angular的區別

        相同點：

        都支持指令：內置指令和自定義指令。
        都支持過濾器：內置過濾器和自定義過濾器。
        都支持雙向數據綁定。
        都不支持低端瀏覽器。

        不一樣點：

        1.AngularJS的學習成本高，好比增長了Dependency Injection特性，而Vue.js自己提供的API都比較簡單、直觀。
        2.在性能上，AngularJS依賴對數據作髒檢查，因此Watcher越多越慢。 Vue.js使用基於依賴追蹤的觀察而且使用異步隊列更新。全部的數據都是獨立觸發的。 對於龐大的應用來講，這個優化差別仍是比較明顯的。

2.7.1.2 angular髒檢查理解

        在angular中你沒法判斷你的數據是否作了更改，因此它設置了一些條件，當你觸發這些條件以後,它就執行一個檢測來遍歷全部的數據，對比你更改的地方，而後執行變化。
        這個檢查很不科學。並且效率不高，有不少多餘的地方，因此官方稱爲 髒檢查。

2.7.2 Vue與React的區別以及 React / Vue 在組件中寫 key的做用

2.7.2.1 Vue與React的區別

        相同點：

        React採用特殊的JSX語法，Vue.js在組件開發中也推崇編寫.vue特殊文件格式，對文件內容都有一些約定，二者都須要編譯後使用。
        中心思想相同：一切都是組件，組件實例之間能夠嵌套。
        都提供合理的鉤子函數，可讓開發者定製化地去處理需求。
        都不內置列數AJAX，Route等功能到核心包，而是以插件的方式加載。
        在組件開發中都支持mixins的特性。

        不一樣點：

        React依賴Virtual DOM,而Vue.js使用的是DOM模板。React採用的Virtual DOM會對渲染出來的結果作髒檢查。
        Vue.js在模板中提供了指令，過濾器等，能夠很是方便，快捷地操做DOM。

2.7.2.2 React / Vue 在組件中寫 key的做用

        在開發過程當中，咱們須要保證某個元素的 key 在其同級元素中具備惟一性。在 Diff 算法中 會藉助元素的 Key 值來判斷該元素是新近建立的仍是被移動而來的元素，從而減小沒必要要的元素重渲染。

2.8 Vue的路由實現：hash模式 和 history模式

2.8.1 hash模式

        在瀏覽器中符號「#」，#以及#後面的字符稱之爲hash，用window.location.hash讀取；
        特色：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動做，對服務端安全無用，hash不會重加載頁面。 hash 模式下，僅 hash 符號以前的內容會被包含在請求中，如 http://www.xxx.com，所以對於後端來講，即便沒有作到對路由的全覆蓋，也不會返回 404 錯誤。

2.8.2 history模式

        history採用HTML5的新特性；且提供了兩個新方法：pushState（），replaceState（）能夠對瀏覽器歷史記錄棧進行修改，以及popState事件的監聽到狀態變動。
        history 模式下，前端的 URL 必須和實際向後端發起請求的 URL 一致，如 http://www.xxx.com/items/id。後端若是缺乏對 /items/id 的路由處理，將返回 404 錯誤。Vue-Router 官網裏如此描述：「不過這種模式要玩好，還須要後臺配置支持……因此呢，你要在服務端增長一個覆蓋全部狀況的候選資源：若是 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。」

2.9 Vue路由的鉤子函數

        首頁能夠控制導航跳轉，beforeEach，afterEach等，通常用於頁面title的修改。一些須要登陸才能調整頁面的重定向功能。
        beforeEach主要有3個參數to，from，next：
        to：route即將進入的目標路由對象，
        from：route當前導航正要離開的路由
        next：function必定要調用該方法resolve這個鉤子。執行效果依賴next方法的調用參數。能夠控制網頁的跳轉。

2.10 Vue等單頁面應用及其優缺點

        優勢：Vue 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件，核心是一個響應的數據綁定系統。MVVM、數據驅動、組件化、輕量、簡潔、高效、快速、模塊友好。

        缺點：不支持低版本的瀏覽器，最低只支持到IE9；不利於SEO的優化（若是要支持SEO，建議經過服務端來進行渲染組件）；第一次加載首頁耗時相對長一些；不可使用瀏覽器的導航按鈕須要自行實現前進、後退。

3  Vue全家桶精講

3.1 Vue-Cli的使用以及原理

3.1.1 Vue-Cli的使用

        首先須要在命令行中進入到項目目錄，而後輸入：

vue init webpack Vue-Project
複製代碼

        其中 webpack 是模板名稱，能夠到 vue.js 的 GitHub 上查看更多的模板github.com/vuejs-templ…

        Vue-Project 是自定義的項目名稱，命令執行以後，會在當前目錄生成一個以該名稱命名的項目文件夾

        配置完成後，能夠看到目錄下多出了一個項目文件夾，裏面就是 vue-cli 建立的一個基於 webpack 的 vue.js 項目
        而後進入項目目錄（cd Vue-Project），使用 cnpm 安裝依賴

cnpm install
複製代碼

        而後啓動項目

npm run dev
複製代碼

        打包上線

npm run build
複製代碼

3.1.2 Vue-Cli的原理

        這裏就不詳細介紹Vue-Cli原理了,貼一篇文章這篇文章講原理講的仍是比較細緻的,Vue-Cli原理在以後的文章裏我會單獨拎出來跟你們詳細講解的,下面是文章地址

        Vue-cli原理分析

3.2 Vue axios的使用

3.2.1 axios是什麼以及怎麼使用

        請求後臺資源的模塊。npm install axios -S裝好，而後發送的是跨域，需在配置文件中config/index.js進行設置。後臺若是是Tp5則定義一個資源路由。js中使用import進來，而後.get或.post。返回在.then函數中若是成功，失敗則是在.catch函數中

1.GET 請求

// 爲給定 ID 的 user 建立請求
axios.get('/user?ID=12345')
  .then(response=>{
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
//換個姿式實現
axios.get('/user', {
    params: {                         //區別：  get是用params傳值
      ID: 12345
    }
  })
  .then(response=>{
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
複製代碼

2.POST 請求

axios.post('/user', {                  //        post是用對象傳值      
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(response=>{
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
複製代碼

3.執行多個併發請求

function getUserAccount() {
  return axios.get('/user/12345');
}
function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {      //兩個參數分別表明返回的結果
                                                   // 當這兩個請求都完成的時候會觸發這個函數
  }));
複製代碼

        請求方法-別名列表

        axios.request(config)

        axios.get(url[, config])

        axios.delete(url[, config])

        axios.head(url[, config])

        axios.post(url[, data[, config]])

        axios.put(url[, data[, config]])

        axios.patch(url[, data[, config]])

        併發

        axios.all(iterable)//iterable是一個能夠迭代的參數如數組等

        axios.spread(callback)//callback要等到全部請求都完成纔會執行

3.2.2 結合 vue-axios使用

        首先在主入口文件main.js中引用：

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios);
複製代碼

        以後就可使用了，在組件文件中的methods裏去使用了：

getNewsList(){
      this.axios.get('api/getNewsList').then((response)=>{
        this.newsList=response.data.data;
      }).catch((response)=>{
        console.log(response);
      })
}
複製代碼

        這裏一樣以後我會專門出一篇文章來寫axios的.

3.3 Vuex狀態管理的屬性以及特性以及實戰

3.3.1 Vuex狀態管理的屬性

        vuex分別有五種屬性分別是 State、 Getter、Mutation 、Action、 Module

3.3.1.1 state

        state爲單一狀態樹，在state中須要定義咱們所須要管理的數組、對象、字符串等等，只有在這裏定義了，在vue.js的組件中才能獲取你定義的這個對象的狀態。

3.3.1.2 getter

        getter有點相似vue.js的計算屬性，當咱們須要從store的state中派生出一些狀態，那麼咱們就須要使用getter，getter會接收state做爲第一個參數，並且getter的返回值會根據它的依賴被緩存起來，只有getter中的依賴值（state中的某個須要派生狀態的值）發生改變的時候纔會被從新計算。

3.3.1.3 mutation

        更改store中state狀態的惟一方法就是提交mutation，就很相似事件。每一個mutation都有一個字符串類型的事件類型和一個回調函數，咱們須要改變state的值就要在回調函數中改變。咱們要執行這個回調函數，那麼咱們須要執行一個相應的調用方法：store.commit。

3.3.1.4 action

        action能夠提交mutation，在action中能夠執行store.commit，並且action中能夠有任何的異步操做。在頁面中若是咱們要嗲用這個action，則須要執行store.dispatch

3.3.1.5 module

        module其實只是解決了當state中很複雜臃腫的時候，module能夠將store分割成模塊，每一個模塊中擁有本身的state、mutation、action和getter。

3.3.2 Vuex狀態管理的特性

3.3.2.1 vuex的State特性

        1、Vuex就是一個倉庫，倉庫裏面放了不少對象。其中state就是數據源存放地，對應於與通常Vue對象裏面的data
        2、state裏面存放的數據是響應式的，Vue組件從store中讀取數據，如果store中的數據發生改變，依賴這個數據的組件也會發生更新
        3、它經過mapState把全局的 state 和 getters 映射到當前組件的 computed 計算屬性中

3.3.2.2 vuex的Getter特性

        1、getters 能夠對State進行計算操做，它就是Store的計算屬性
        2、 雖然在組件內也能夠作計算屬性，可是getters 能夠在多組件之間複用
        3、 若是一個狀態只在一個組件內使用，是能夠不用getters

3.3.2.3 vuex的Mutation特性

        1、Action 相似於 mutation，不一樣在於：
        2、Action 提交的是 mutation，而不是直接變動狀態。
        3、Action 能夠包含任意異步操做

3.3.3 Vuex的認知

        vuex能夠理解爲一種開發模式或框架。好比PHP有thinkphp，java有spring等。經過狀態（數據源）集中管理驅動組件的變化（比如spring的IOC容器對bean進行集中管理）。
        應用級的狀態集中放在store中； 改變狀態的方式是提交mutations，這是個同步的事物； 異步邏輯應該封裝在action中。

3.3.3 Vuex的實戰

        實戰內容我在以前有寫過文章介紹過,這裏貼一個地址歡迎你們去看:

        瞭解Vuex方法的使用初級篇

3.3 Vue-Router使用方法以及實戰

3.3.1 Vue-Router的導航鉤子以及它們的參數.

導航鉤子有：

        a/全局鉤子和組件內獨享的鉤子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave

參數：

        有to（去的那個路由）、from（離開的路由）、next（必定要用這個函數才能去到下一個路由，若是不用就攔截）最經常使用就這幾種

3.3.2 Vue-Router定義動態路由以及獲取傳過來的動態參數

        在router目錄下的index.js文件中，對path屬性加上/:id。

        使用router對象的params.id。

3.3.3 Vue-Router嵌套路的定義

        在實際項目中咱們會碰到多層嵌套的組件組合而成，可是咱們如何實現嵌套路由呢？所以咱們須要在 VueRouter 的參數中使用 children 配置，這樣就能夠很好的實現路由嵌套。 index.html，只有一個路由出口

<div id="app">  
    <!-- router-view 路由出口, 路由匹配到的組件將渲染在這裏 -->  
    <router-view></router-view>  
</div>
複製代碼

        main.js，路由的重定向，就會在頁面一加載的時候，就會將home組件顯示出來，由於重定向指向了home組件，redirect的指向與path的必須一致。children裏面是子路由，固然子路由裏面還能夠繼續嵌套子路由。

import Vue from 'vue'  
import VueRouter from 'vue-router'  
Vue.use(VueRouter)  

//引入兩個組件 

import home from "./home.vue"  
import game from "./game.vue"  
//定義路由  
const routes = [  
    { path: "/", redirect: "/home" },//重定向,指向了home組件  
    {  
        path: "/home", component: home,  
        children: [  
            { path: "/home/game", component: game }  
        ]  
    }  
]  
//建立路由實例  
const router = new VueRouter({routes})  

new Vue({  
    el: '#app',  
    data: {  
    },  
    methods: {  
    },  
    router  
})
複製代碼

        home.vue，點擊顯示就會將子路由顯示在出來，子路由的出口必須在父路由裏面，不然子路由沒法顯示。

<template>  
    <div>  
        <h3>首頁</h3>  
        <router-link to="/home/game">  
            <button>顯示<tton>  
        </router-link>  
        <router-view></router-view>  
    </div>  
</template>
複製代碼

        game.vue

<template>  
    <h3>遊戲</h3>  
</template>
複製代碼

3.3.3 Vue-Router的導航鉤子

        全局導航鉤子

        router.beforeEach(to, from, next),

        router.beforeResolve(to, from, next),

        router.afterEach(to, from ,next)

        組件內鉤子

        beforeRouteEnter,

        beforeRouteUpdate,

        beforeRouteLeave

        單獨路由獨享組件

        beforeEnter

3.3.4 Vue-Router的組件

        vue用來寫路由一個插件。router-link、router-view

3.3.5 Vue-Router實戰

        仍是和上面同樣推薦我寫的文章:

        淺談Vue-router的部分高級用法

        淺談Vue-router使用方法及動態路由和嵌套路由的使用

總結

        你們能看到這裏仍是很是感謝的,畢竟能看我嘮了這麼久的同志,也是對個人這篇文章的承認吧,另外不建議的話給個贊加個關注,仍是謝謝了,畢竟新人創做不易,光是打字都用了一天,因此仍是指望各位大大們的關注,點評和點贊,若是有轉發就更好了.

        另外呢我寫的有什麼不到位的地方還望各位大神在評論區批評指正,感謝.

        最後透露一點,下次的文章和算法之類有關,敬請期待,另外文章每一週到兩週時間更新一篇,還望見諒,最近比較忙只能隔週更新,以後時間充裕的話會每週更新的,謝謝.