Vue 生命週期及運用場景
阿新 • • 發佈：2020-10-21
從Vue例項建立、執行、銷燬期間，總是伴隨著各種各樣的事件，這些事件統稱為生命週期。
生命週期鉤子：生命週期事件的別名。
生命週期函式分類
- 建立期間的生命週期函式
beforCreate：例項在記憶體中被創建出來。還未初始化data和methods。created： 已經完成了資料觀測(data observer)，屬性和方法的運算， watch/event 事件回撥。 在記憶體中初始化好data和methods。此時還未開始編譯模板（建立虛擬DOM）， $el 屬性目前不可見 。beforeMount： 相關的 render 函式首次被呼叫 。在記憶體中已經完成了模板編譯。此時還未掛載到頁面中。mounted：將記憶體中的編譯模板掛載到頁面中顯示。此時建立階段完成。
- 執行期間的生命週期函式
beforeUpdate：狀態更新之前呼叫。當記憶體中例項的data資料更新時觸發。此時記憶體中data是最新的，但是還未重新渲染DOM節點。updated：例項更新完畢之後執行。此時記憶體中的 最新data已經重新渲染到DOM節點。
- 銷燬期間的生命週期函式
beforeDestroy：例項銷燬之前呼叫。執行該函式時已經從執行階段進入銷燬階段。此時例項完全可用（如：data、methods、filter...）。destroyed：例項銷燬之後呼叫。呼叫後，Vue例項指示的所有東西都會解綁，所有的事件監聽都會解綁，所有的子例項也會被消除。
生命週期圖示
生命週期運用場景
created：進行ajax請求非同步資料的獲取、初始化資料mounted：掛載元素內dom節點的獲取nextTick：針對單一事件更新資料後立即操作domupdated：任何資料的更新，如果要做統一的業務邏輯處理watch：監聽具體資料變化，並做相應的處理
<body> <div id="app"> <p id="testMsg">{{ msg }}</p> <button @click="msg = '資料更新啦!'">msg 資料更新</button> <button @click="$destroy()">例項銷燬</button> </div> <script> var vm = new Vue({ el: '#app', data: { msg: 'Hello Vue！' }, methods: { show () { console.log('呼叫 show() 函式') } }, beforeCreate () { // 例項被建立前執行 // 執行函式時 data 和 methods 還沒有被初始化 // 運用場景： console.log('beforeCreated 呼叫') console.log('this.msg',this.msg) // 列印 undefined this.show() // 報錯 show() is not undefined }, created () { // 例項被建立之後執行 // 執行函式時data 和 methods 初始化完成。但是模板還未開始編輯 // 運用場景：1) Ajax 非同步資料請求 2) 初始化操作 console.log('created 呼叫') console.log('this.msg',this.msg) // 列印 Hello Vue！ this.show() // 呼叫 show() 函式 }, beforeMount () { // 例項掛載前執行 // 此時模板已經編輯完成到記憶體中。但是還未渲染到 DOM，固頁面未展示 // 運用場景： console.log('beforeMount 呼叫') console.log('記憶體中變數',this.msg) // 列印 Hello Vue! console.log('頁面上的變數',document.getElementById('testMsg').innerText) // 列印 {{ msg }} }, mounted () { // 例項掛載後執行 // 此時已經渲染了DOM，可以呼叫外掛操作 DOM // 運用場景：掛載元素內dom節點的獲取。可以配合$.nextTick 使用進行單一事件對資料的更新後更新dom console.log('mounted 呼叫') console.log('記憶體中變數',this.msg) // 列印 Hello Vue! console.log('頁面上的變數',document.getElementById('testMsg').innerText) // 列印 Hello Vue! }, beforeUpdate () { // 資料更新前執行 // data 資料有更新時，記憶體中重新編譯了最新模板字串，但還未重新渲染DOM // 運用場景： console.log('beforeUpdate 呼叫') console.log('記憶體中變數',this.msg) // 列印 資料更新啦! console.log('頁面上的變數',document.getElementById('testMsg').innerText) // 列印 Hello Vue! }, updated () { // 資料更新後執行 // 已經重新渲染 DOM // 運用場景：對資料更新作統一邏輯業務處理 console.log('updated 呼叫') console.log('記憶體中變數',this.msg) // 列印 資料更新啦! console.log('頁面上的變數',document.getElementById('testMsg').innerText) // 列印 資料更新啦! }, beforeDestroy () { // 例項銷燬前呼叫：（$destroy方法被呼叫的時候就會執行） // 運用場景：善後:清除計時器、清除非指令繫結的事件等等 console.log('beforeDestroy 呼叫') console.log('this.msg',this.msg) }, destroyed () { // 例項銷燬後執行 // 例項銷燬： 元件的資料繫結、監聽...都去掉了,只剩下dom空殼。data，methods 還在，但是已經無法對其進行操作了 // 運用場景：這裡也可以善後 console.log('destroyed 呼叫') console.log('this.msg',this.msg) // 列印最後的 msg 的值 this.msg = 'new value' // data 資料不會再改變 this.show() // 呼叫 show() 方法，單若有資料操作等是不生效的 } }) </script> </body>