Vue-生命週期
vue生命週期示意圖：
以程式碼為例對上述過程進行解釋：：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </head> <body> <div id="app"> <input v-model="message"/> <p>{{message}}</p> <button @click="clickfun">按鈕</button> </div> </body> <script> var myVue = new Vue({ el: '#app', data: function () { return { message: 'XXXX' }; }, beforeCreate: function () { console.group('beforeCreate 建立前狀態===============》'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(state); }, created: function () { console.group('created 建立完畢狀態===============》'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(state); }, beforeMount: function () { console.group('beforeMount 掛載前狀態===============》'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(this.$el); console.log(state); }, mounted: function () { console.group('mounted 掛載結束狀態===============》'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(this.$el); console.log(state); }, beforeUpdate: function () { console.group('beforeUpdate 更新前狀態===============》'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(this.$el); console.log(state); console.log('beforeUpdate == ' + document.getElementsByTagName('p')[0].innerHTML); }, updated: function () { console.group('updated 更新完成狀態===============》'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(this.$el); console.log(state); console.log('updated == ' + document.getElementsByTagName('p')[0].innerHTML); }, beforeDestroy: function () { console.group('beforeDestroy 銷燬前狀態===============》'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(this.$el); console.log(state); }, destroyed: function () { console.group('destroyed 銷燬完成狀態===============》'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(this.$el); console.log(state); }, methods: { clickfun() { myVue.$destroy() } } }); </script> </html>
1. new vue() :這是new了一個vue的例項物件；此時就會進入元件的建立過程。
2. Init Events & Lifecycle :初始化元件的事件和生命週期函式；當執行完這一步之後，元件的生命週期函式就已經全部初始化好了，等待著依次去呼叫。
3. beforeCreate
官方說明：在例項初始化之後，資料觀測(data observer) 和 event/watcher 事件配置之前被呼叫。
解釋：這是第一個生命週期函式；此時，元件的data和methods以及頁面DOM結構，都還沒有初始化；所以此階段，什麼都做不了。
4. Init injections & reactivity
5. created
官方說明：例項已經建立完成之後被呼叫。在這一步，例項已完成以下的配置：資料觀測(data observer)，屬性和方法的運算， watch/event 事件回撥。然而，掛載階段還沒開始，$el 屬性目前不可見。
解釋：這個元件建立階段第二個生命週期函式，此時，元件的data和methods已經可以用了；但是頁面還沒有渲染出來；在這個生命週期函式中，我們經常會發起Ajax請求；
6.正在解析模板結構，把data上的資料拿到，並且解析執行模板結構彙總的指令；當所有指令被解析完畢，那麼模板頁面就被渲染到記憶體中了；當模板編譯完成，我們的模板頁面，還沒有掛載到頁面上，只是存在於記憶體中，使用者看不到頁面；
7. beforeMount
官方說明：在掛載開始之前被呼叫：相關的 render 函式首次被呼叫。
解釋：當模板在記憶體中編譯完成，會立即執行例項建立階段的第三個生命週期函式，這個函式就是beforeMount，此時記憶體中的模板結構，還沒有真正渲染到頁面上；此時，頁面上看不到真實的資料，使用者看到的只是一個模板頁面而已；
8.這一步把正在記憶體中渲染好的模板結構替換到頁面上；
9. mounted
官方說明：el 被新建立的 vm.$el 替換，並掛載到例項上去之後呼叫該鉤子。如果 root 例項掛載了一個文件內元素，當 mounted 被呼叫時 vm.$el 也在文件內。
解釋：mounted是元件建立階段最後的一個生命週期函式；此時，頁面已經真正的渲染好了，使用者可以看到真實的頁面資料了；當這個生命週期函式執行完，元件就離開了建立階段，進入到了執行中的階段；如果大家使用到一些第三方的UI外掛，而且這個外掛還需要被初始化，那麼，必須在mounted中來初始化外掛；
10.元件執行彙總的生命週期函式；元件執行中的生命週期函式，會根據data資料的變化，有選擇性的被觸發0次貨N次；
11. beforeUpdate
官方說明：資料更新時呼叫，發生在虛擬 DOM 重新渲染和打補丁之前。你可以在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。
解釋：在執行beforeUpdate執行中的生命週期函式的時候，資料肯定是最新的；但是頁面上呈現的資料還是舊的；
12.正在根據最新的data資料，重新渲染記憶體中的的模板結構；並把渲染好的模板結構替換到頁面上
13. updated
官方說明：由於資料更改導致的虛擬 DOM 重新渲染和打補丁，在這之後會呼叫該鉤子。當這個鉤子被呼叫時，元件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。
解釋：頁面也完成了更新，此時，data資料是最新的，同時，頁面上呈現的資料也只最新的；
14. beforeDestroy
官方說明：例項銷燬之前呼叫。在這一步，例項仍然完全可用。
解釋：當執行beforeDestroy的時候，元件即將被銷燬，但是還沒有真正開始銷燬，此時元件還是正常可用的；data、methods等資料或方法，依舊可以被正常訪問；
15.銷燬過程
16. destroyed
官方說明：vue 例項銷燬後呼叫。呼叫後，Vue 例項指示的所有東西都會解繫結，所有的事件監聽器會被移除，所有的子例項也會被銷燬。
解釋：元件已完成了銷燬，元件無法使用，data和methods都不可使用。