學習完整課程請移步 互聯(lián)網 Java 全棧工程師
什么是生命周期
Vue 實例有一個完整的生命周期力试,也就是從開始創(chuàng)建毛仪、初始化數據、編譯模板对粪、掛載 DOM右冻、渲染→更新→渲染装蓬、卸載等一系列過程,我們稱這是 Vue 的生命周期纱扭。通俗說就是 Vue 實例從創(chuàng)建到銷毀的過程牍帚,就是生命周期。
在 Vue 的整個生命周期中乳蛾,它提供了一系列的事件暗赶,可以讓我們在事件觸發(fā)時注冊 JS 方法,可以讓我們用自己注冊的 JS 方法控制整個大局肃叶,在這些事件響應方法中的 this 直接指向的是 Vue 的實例蹂随。
特別值得注意的是
created
鉤子函數和mounted
鉤子函數的區(qū)別
鉤子函數的觸發(fā)時機
beforeCreate
在實例初始化之后,數據觀測(data observer) 和 event/watcher 事件配置之前被調用因惭。
created
實例已經創(chuàng)建完成之后被調用岳锁。在這一步,實例已完成以下的配置:數據觀測(data observer)筛欢,屬性和方法的運算浸锨, watch/event 事件回調。然而版姑,掛載階段還沒開始,$el 屬性目前不可見迟郎。
beforeMount
在掛載開始之前被調用:相關的 render 函數首次被調用剥险。
mounted
el 被新創(chuàng)建的 vm.$el 替換,并掛載到實例上去之后調用該鉤子宪肖。
beforeUpdate
數據更新時調用表制,發(fā)生在虛擬 DOM 重新渲染和打補丁之前。 你可以在這個鉤子中進一步地更改狀態(tài)控乾,這不會觸發(fā)附加的重渲染過程么介。
updated
由于數據更改導致的虛擬 DOM 重新渲染和打補丁,在這之后會調用該鉤子蜕衡。
當這個鉤子被調用時壤短,組件 DOM 已經更新,所以你現在可以執(zhí)行依賴于 DOM 的操作慨仿。然而在大多數情況下久脯,你應該避免在此期間更改狀態(tài),因為這可能會導致更新無限循環(huán)镰吆。該鉤子在服務器端渲染期間不被調用帘撰。
beforeDestroy
實例銷毀之前調用。在這一步万皿,實例仍然完全可用摧找。
destroyed
Vue 實例銷毀后調用核行。調用后,Vue 實例指示的所有東西都會解綁定蹬耘,所有的事件監(jiān)聽器會被移除芝雪,所有的子實例也會被銷毀。該鉤子在服務器端渲染期間不被調用婆赠。