摘要:官網(wǎng)生命周期圖個人理解實例組件剛創(chuàng)建好,配置數(shù)據(jù)觀測之前的階段。數(shù)據(jù)更新時調(diào)用,發(fā)生在虛擬重新渲染和打補丁之前,該階段不會觸發(fā)附加的重渲染過程,該鉤子在服務(wù)器端渲染期間也不會被調(diào)用。
vue官網(wǎng)生命周期圖 個人理解
beforeCreate
實例組件剛創(chuàng)建好,配置數(shù)據(jù)觀測(observe data)之前的階段。el和data還未初始化。
在此階段,一般處理loading事件之類的事情。
created
實例創(chuàng)建完成,完成屬性綁定,這個階段DOM并沒有生成,$el屬性不存在。el未初始化,data初始化。
此階段,異步數(shù)據(jù)的請求操作宜在此調(diào)用,實現(xiàn)結(jié)束loading,做一些初始化處理,實現(xiàn)一些函數(shù)的自執(zhí)行。
beforeMounted
模板編譯之前的階段。el和data完成初始化,computed計算屬性中,只更改一次的屬性會在此階段加載。
mounted
完成模板編譯之后的階段。頁面的vue指令編譯成html代碼,例如:
{{message}}
會編譯成compile completed!
。beforeUpdated
數(shù)據(jù)更新時調(diào)用,發(fā)生在虛擬 DOM 重新渲染和打補丁之前,該階段不會觸發(fā)附加的重渲染過程,該鉤子在服務(wù)器端渲染期間也不會被調(diào)用。
updated
由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補丁,在這之后會調(diào)用該鉤子。
當這個鉤子被調(diào)用時,組件 DOM 已經(jīng)更新,所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。
一般在此鉤子出做統(tǒng)一數(shù)據(jù)更新操作,如果需要區(qū)分不同數(shù)據(jù)的更新,同時操作DOM,可以使用nextTick函數(shù)。
activated
keep-alive 組件激活時調(diào)用。
deactivated
keep-alive 組件停用時調(diào)用。
beforeDestroy
實例銷毀之前調(diào)用。在這一步,實例仍然完全可用。
destroy
Vue 實例銷毀后調(diào)用。調(diào)用后,Vue 實例指示的所有東西都會解綁定,所有的事件監(jiān)聽器會被移除,所有的子實例也會被銷毀。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/83690.html
摘要:注意看下此時還是沒有選項鉤子函數(shù)和間的生命周期在這一階段發(fā)生的事情還是比較多的。鉤子函數(shù)和鉤子函數(shù)間的生命周期當發(fā)現(xiàn)中的數(shù)據(jù)發(fā)生了改變,會觸發(fā)對應(yīng)組件的重新渲染,先后調(diào)用和鉤子函數(shù)。 首先,每個Vue實例在被創(chuàng)建之前都要經(jīng)過一系列的初始化過程,這個過程就是vue的生命周期。首先看一張圖吧~這是官方文檔上的圖片相信大家一定都會很熟悉: showImg(https://segmentfau...
摘要:實例在文檔中經(jīng)常會使用這個變量名表示實例,在實例化時,需要傳入一個選項對象,它可以包含數(shù)據(jù)模板掛載元素方法生命周期鉤子等選項。通俗說就是實例從創(chuàng)建到銷毀的過程,就是生命周期。 Vue 實例中的生命周期鉤子 Vue 框架的入口就是 Vue 實例,其實就是框架中的 view model ,它包含頁面中的業(yè)務(wù)處理邏輯、數(shù)據(jù)模型等,它的生命周期中有多個事件鉤子,讓我們在控制整個Vue實例的過程...
摘要:前言用也有一段時間了發(fā)現(xiàn)生命周期是很重要的一部分稍微懂得了一些東西特地來分享一下生命周期和鉤子函數(shù)介紹啥也不說先上圖圖為生命周期圖圖為生命周期圖圖為和鉤子函數(shù)比較重點看生命周期和鉤子函數(shù)具體上代碼自己粘走執(zhí)行創(chuàng)建前狀態(tài)創(chuàng)建完畢狀態(tài) 前言 用Vue也有一段時間了,發(fā)現(xiàn)生命周期是很重要的一部分,稍微懂得了一些東西,特地來分享一下. 生命周期和鉤子函數(shù)-介紹 啥也不說先上圖圖-1為 Vue...
閱讀 1468·2021-09-02 13:57
閱讀 1885·2019-08-30 15:55
閱讀 2424·2019-08-30 15:54
閱讀 2264·2019-08-30 15:44
閱讀 2748·2019-08-30 13:18
閱讀 496·2019-08-30 13:02
閱讀 673·2019-08-29 18:46
閱讀 1673·2019-08-29 11:25