前言
通過上一章的學習，我們已經初步的了解了vue到底是什么東西，可以干什么，而這一篇博客主要介紹vue的生命周期和它常用的鈎子函數，如果有學過java的園友可能有接觸到在學習servlet的時候學過servlet的生命周期servlet 加載--->實例化--->服務--->銷毀,對於vue的而言他也有自己的生命周期，那么一起來看看吧！
本章目標
- 學會並了解vue的生命周期和鈎子函數
- 學會使用手動掛載和調用事件
vue的生命周期和鈎子函數
其實在提到vue的生命周期和鈎子函數的時候，有的人認為常用的鈎子函數有10個，也有的人認為是8個，無論是10個還是8個對於我而言都是一樣的，我們主要講解8個vue的鈎子函數。首先來一波官網的對於vue生命周期的圖解
這一張圖對於vue的生命周期已經講解的特別詳細了，但是光靠這一張圖還不足於了解它的生命周期，我們需要實踐一下，有句古話說的好，實踐是檢驗道理的唯一標准，介紹一下vue的鈎子函數。
beforeCreate(實例創建前)
實例組件剛開始創建，元素dom和數據都還沒有初始化
應用場景：可以在這加個loading事件
created(實例創建后)
數據data已經初始化完成，方法也已經可以調用，但是dom為渲染，在這個周期里面如果進行請求是可以改變數據並渲染，由於dom未掛載，請求過多或者占用時間過長會導致頁面線上空白
應用場景：在這結束loading，還做一些初始化，實現函數自執行
beforeMoute(元素掛載前)
dom未完成掛載，數據初始化完成，但是數據的雙向綁定還是{{}},這是因為vue采用了虛擬dom技術。
mouted(元素掛載后)
數據和dom都完成掛載，在上一個周期占位的數據把值渲染進去，一般請求會放在這個地方，因為這邊請求改變數據之后剛好能渲染。
beforeUpdate(實例更新前)
只要是頁面數據改變了都會觸發，數據更新之前，頁面數據還是原來的數據，當你請求賦值一個數據的時候就會執行這個周期，如果沒有數據改變不執行。
updated(實例更新后)
只要是頁面數據改變了都會觸發，數據更新完畢，頁面的數據是更新完成的，beforeUpdated和updated要謹慎使用，因為頁面更新數據的時候都會觸發，在這里操作數據很影響性能和死循環。
beforeDestory(實例銷毀前)
實例銷毀之前調用，在這一步，實例仍然完全可用。
destory(實例銷毀后)
vue實例銷毀后調用，調用后，Vue實例指示的所有內容都會解除綁定，所有的事件監聽器都會被移除，所有的子實例也會被銷毀。
實例一
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue的生命周期實例一</title> </head> <body> <div id="app"> <input type="text" v-model="msg" /> {{msg}} </div> <button onclick="destory()">銷毀</button> <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> const vm=new Vue({ el:'#app', data:{ msg:'vue' }, beforeCreate(){ console.log('vue實例創建前:'+this.msg+','+this.$el); // 數據data和dom都還沒有初始化 }, created(){ console.log('vue實例創建后:'+this.msg+','+this.$el); //數據dom初始化完成，dom還沒有初始化完成 }, beforeMount(){ console.log('元素掛載前:'); console.log(this.$el); }, mounted(){ console.log('元素掛載后:'); console.log(this.$el); }, beforeUpdate(){ console.log('實例更新前'); console.log(this.msg); console.log(this.$el); }, updated(){ console.log('實例更新后'); console.log(this.msg); console.log(this.$el); }, beforeDestroy(){ console.log('實例銷毀前'); console.log(this.msg); }, destroyed(){ console.log('實例銷毀后'); console.log(this.msg); } }); function destory(){ vm.$destroy(); } </script> </body> </html>
結果:
實例二
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue的生命周期實例二</title> </head> <body> <div id="app"> {{name}} </div> <button onclick="destory()">銷毀實例</button> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> const vm=new Vue({ el:'#app', data:{ name:'一只流浪的kk', age:18 }, beforeCreate(){ console.log('============實例創建前============='); console.log(this.$el); //undefined console.log(this.$data);//undefined }, created(){ console.log('============實例創建后============='); console.log(this.$el); console.log(JSON.stringify(this.$data)); }, beforeMount(){ console.log('============元素掛載前============='); console.log(this.$el); console.log(JSON.stringify(this.$data)); }, mounted(){ console.log('============元素掛載后============='); console.log(this.$el); console.log(JSON.stringify(this.$data)); }, beforeUpdate(){ console.log('============實例更新前============='); console.log(this.$el); console.log(JSON.stringify(this.$data)); }, updated(){ console.log('============實例更新后============='); console.log(this.$el); console.log(JSON.stringify(this.$data)); }, beforeDestroy(){ console.log('============實例銷毀前============='); console.log(this.$el); console.log(JSON.stringify(this.$data)); }, destroyed(){ console.log('============實例銷毀后============='); console.log(this.$el); console.log(JSON.stringify(this.$data)); } }); function destory(){ vm.$destroy(); } </script> </body> </html>
總結
-
beforeCreate() : 此時$el、data 的值都為undefined,即el 和 data 並未初始化 。
-
create(): 此時可以拿到data的值，但是$el依舊為undefined，即data完成了 數據的初始化，el沒有。
-
beforeMounte(): $el的值為“虛擬”的元素節點,dom未完成掛載，數據初始化完成，但是數據的雙向綁定還是{{}},這是因為vue采用了虛擬dom技術。
-
mouted(): 數據和dom都完成掛載，在上一個周期占位的數據把值渲染進去，一般請求會放在這個地方，因為這邊請求改變數據之后剛好能渲染。
vue實例的手動掛載和調用事件
vm.＄mount( [elementOrSelector] ) 如果 Vue 實例在實例化時沒有收到 el 選項，則它處於“未掛載”狀態，沒有關聯的 DOM 元素。可以使用 vm.＄mount() 手動地掛載一個未掛載的實例，學習手動掛載和調用事件之前，我提取了一些vue實例常用的屬性和方法，帶有前綴 ＄ 便於與代理的data區分。
- vm.＄el：類型（HTMLElement）掛載元素，Vue實例的DOM根元素；即vm.$el===document.getElementById('節點')，注意：相等的情況必須是實例創建之后才行，也就是created之后。
- vm.＄data：類型（Object），Vue實例觀察的數據對象。
- vm.＄props：類型（Object），當前組件接收到的 props 對象。Vue 實例代理了對其 props 對象屬性的訪問。
- vm.＄options：類型（Object），用於當前 Vue 實例的初始化選項。需要在選項中包含自定義屬性時會有用處。
- vm.＄parent：類型（Vue實例），父實例，如果當前實例有的話。
- vm.＄root：類型（Vue實例），當前組件樹的根 Vue 實例。如果當前實例沒有父實例，此實例將會是其自己。
- vm.＄children：類型（Array(Vue實例)），當前實例的直接子組件。需要注意
$children並不保證順序，也不是響應式的。如果你發現自己正在嘗試使用$children來進行數據綁定，考慮使用一個數組配合v-for來生成子組件，並且使用 Array 作為真正的來源。
官網地址：https://cn.vuejs.org/v2/api/
接下來是介紹手動掛載和調用事件的常用方法，共有三個
var MyComponent = Vue.extend({ template: '<div>Hello!</div>' }) // 創建並掛載到 #app (會替換 #app) new MyComponent().＄mount('#app') // 同上 new MyComponent({ el: '#app' }) // 或者，在文檔之外渲染並且隨后掛載 var component = new MyComponent().＄mount() document.getElementById('app').appendChild(component.＄el)
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>手動掛載和調用事件</title> </head> <body> <div id="app"> </div> <button onclick="hanlderOne()">手動掛載方式一</button> <button onclick="hanlderTwo()">手動掛載方式二</button> <button onclick="hanlderThree()">手動掛載方式三</button> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> const vm=new Vue({ data:{ name:'vue' }, template:'<h2>{{name}}</h2>' }) function hanlderOne(){ //方法一，手動掛載到指定的dom vm.$mount("#app"); } function hanlderTwo(){ //手動掛載，觸發編譯 vm.$mount(); document.getElementById('app').appendChild(vm.$el); } function hanlderThree(){ //擴展一個新的vue構造器 const component=Vue.extend({ template:'<h2>{{name}}</h2>' }); const a=new component({ data:{ name:'vue' }, el:'#app' }) } </script> </body> </html>
結果：
vm.＄destroy() 完全銷毀一個實例。清理它與其它實例的連接，解綁它的全部指令及事件監聽器，這個方法我們在示例中有使用過，大家可以查看前面的示例。