溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vuejs中生命周期指的是什么

發(fā)布時間:2021-09-08 11:50:13 來源:億速云 閱讀:98 作者:小新 欄目:編程語言

小編給大家分享一下vuejs中生命周期指的是什么,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

vuejs的生命周期是指vue實(shí)例對象從創(chuàng)建之初到銷毀的過程,vue所有功能的實(shí)現(xiàn)都是圍繞其生命周期進(jìn)行的,在生命周期的不同階段調(diào)用對應(yīng)的鉤子函數(shù)可以實(shí)現(xiàn)組件數(shù)據(jù)管理和DOM渲染兩大重要功能。

本教程操作環(huán)境:windows7系統(tǒng)、vue2.9.6版,DELL G3電腦。

生命周期先上圖

vuejs中生命周期指的是什么

什么是生命周期

Vue生命周期是指vue實(shí)例對象從創(chuàng)建之初到銷毀的過程,vue所有功能的實(shí)現(xiàn)都是圍繞其生命周期進(jìn)行的,在生命周期的不同階段調(diào)用對應(yīng)的鉤子函數(shù)可以實(shí)現(xiàn)組件數(shù)據(jù)管理和DOM渲染兩大重要功能。

Vue實(shí)例有一個完整的生命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom、渲染→更新→渲染、卸載等一系列過程,我們稱這是Vue的生命周期。通俗說就是Vue實(shí)例從創(chuàng)建到銷毀的過程,就是生命周期。

在Vue的整個生命周期中,它提供了一系列的事件,可以讓我們在事件觸發(fā)時注冊js方法,可以讓我們用自己注冊的js方法控制整個大局,在這些事件響應(yīng)方法中的this直接指向的是vue的實(shí)例。

再上圖,對生命周期圖的標(biāo)注

vuejs中生命周期指的是什么

vuejs中生命周期指的是什么

特別值得注意的是created鉤子函數(shù)和mounted鉤子函數(shù)的區(qū)別

每個鉤子函數(shù)都在啥時間觸發(fā)

beforeCreate

在實(shí)例初始化之后,數(shù)據(jù)觀測(data observer) 和 event/watcher 事件配置之前被調(diào)用。

created

實(shí)例已經(jīng)創(chuàng)建完成之后被調(diào)用。在這一步,實(shí)例已完成以下的配置:數(shù)據(jù)觀測(data observer),屬性和方法的運(yùn)算, watch/event 事件回調(diào)。然而,掛載階段還沒開始,$el 屬性目前不可見。

beforeMount

在掛載開始之前被調(diào)用:相關(guān)的 render 函數(shù)首次被調(diào)用。

mounted

el 被新創(chuàng)建的 vm.$el 替換,并掛載到實(shí)例上去之后調(diào)用該鉤子。

beforeUpdate

數(shù)據(jù)更新時調(diào)用,發(fā)生在虛擬 DOM 重新渲染和打補(bǔ)丁之前。 你可以在這個鉤子中進(jìn)一步地更改狀態(tài),這不會觸發(fā)附加的重渲染過程。

updated

由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁,在這之后會調(diào)用該鉤子。

當(dāng)這個鉤子被調(diào)用時,組件 DOM 已經(jīng)更新,所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。然而在大多數(shù)情況下,你應(yīng)該避免在此期間更改狀態(tài),因?yàn)檫@可能會導(dǎo)致更新無限循環(huán)。

該鉤子在服務(wù)器端渲染期間不被調(diào)用。

beforeDestroy

實(shí)例銷毀之前調(diào)用。在這一步,實(shí)例仍然完全可用。

destroyed

Vue 實(shí)例銷毀后調(diào)用。調(diào)用后,Vue 實(shí)例指示的所有東西都會解綁定,所有的事件監(jiān)聽器會被移除,所有的子實(shí)例也會被銷毀。 該鉤子在服務(wù)器端渲染期間不被調(diào)用。

以上是“vuejs中生命周期指的是什么”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI