vue的生命周期以及使用場景

vue

1.beforeCreate(){}

　　創建前，訪問不到data當中的屬性以及methods當中的屬性和方法，可以在當前生命周期創建一個loading，在頁面加載完成之后將loading移除

2.created(){}

　　創建后，當前生命周期執行的時候會遍歷data中所有的屬性，給每一個屬性都添加一個getter、setter方法,將data中的屬性變成一個響應式屬性

　　當前生命周期執行的時候會遍歷data&&methods身上所有的屬性和方法,將這些屬性和方法代理到vue的實例身上

　　在當前生命周期中我們可以進行前后端數據的交互(ajax請求)

　　　　----拓展  axios與jquery的ajax有什么不同

　　　　　　　axios的優點：

　　　　　　　　　　1、從nodejs中創建http請求

　　　　　　　　　　2、支持promiseAPI

　　　　　　　　　　3、提供了一些並發請求的接口

　　　　　　　　　　4、自動轉換json數據

　　　　　　　　　　5、客戶端支持防止CSRF/XSRF

　　　　　　　　ajax的缺點：

　　　　　　　　　　　　1、jQuery項目龐大，單純的使用ajax卻要引入整個Jquery非常不合理

　　　　　　　　　　2、基於原生的XHR開發，但是XHR架構並不清晰

3. beforeMount(){}

　　 模板與數據進行結合，但是還沒有掛載到頁面上。因此我們可以在當前生命周期中進行數據最后的修改

4.mounted(){}

　　當前生命周期數據和模板進行相結合，並且已經掛載到頁面上了，因此我們可以在當前生命周期中獲取到真實的DOM元素

　　如何獲取DOM元素

                1、給元素添加一個ref屬性值必須是唯一的

                2、使用：this.$refs.屬性

            　　還可以在當前生命周期中做方法的實例化

5. beforeUpdate(){}

　　當數據發生改變的時候當前生命周期就會執行，因此我們可以通過當前生命周期來檢測數據的變化

　　當前生命周期執行的時候會將更新的數據與模板進行相結合，但是並沒有掛載到頁面上，因此我們可以在當前生命周期中做更新數據的最后修改

6.updated(){}

　　數據與模板進行相結合，並且將更新后的數據掛載到了頁面上。因此我們可以在當前生命周期中獲取到最新的DOM結構

　　注意： 

　　　　在當前生命周期中如果做實例化操作的時候切記要做條件判斷

7. beforeDestroy(){}

　　當前生命周期中我們需要做事件的解綁  監聽的移除  定時器的清除等操作

8. destroyed(){}

　　當前生命周期執行完畢后會將vue與頁面之間的關聯進行斷開

 

 

當<keep-alive>包裹動態組件的時候會觸發兩個新的生命周期

　　　　---什么是動態組件呢？

　　　　　　讓多個組件使用同一個掛載點，並動態進行切換。這就是動態組件          

　　　　　　通過保留<component></component>元素,綁定is特性進行動態切換可以實現動態組件

　　　　--- 包裹動態組件(組件)時，會緩存不活動的組件實例,而不是銷毀它們組件切換調用的時候本身會被銷毀掉的，

　　　　　只要加上keep-alive進行包裹，就不會被銷毀，而是被緩存起來,下一次使用的時候直接從緩存中調用<keep-alive> 是一個抽象組件：

　　　　　它自身不會渲染一個 DOM 元素

　　　　---keep-alive身上有幾個常用的屬性include，exclude，max 

　　　　　　　　　　include :     類型：字符串或者正則表達式            解釋：只有名稱匹配的組件會被緩存        

　　　　　　　　　　exclude :    類型：字符串或者正則表達式            解釋：任何名稱匹配的組件都不會被緩存                

　　　　　　　　　　max :          類型:數字            　　　　　　　　  解釋：最多可以緩存多少組件實例

9.　　activated     當組件為活躍狀態的時候觸發(活躍狀態：進入頁面的時候)

10.  deactivated     緩存狀態的時候觸發