資訊專欄INFORMATION COLUMN
摘要：生命周期簡(jiǎn)單來(lái)說(shuō)就是一個(gè)組件從創(chuàng)建到初始化到銷毀的一個(gè)過(guò)程，在這個(gè)過(guò)程中有這些生命周期鉤子函數(shù)我們可以更方便的去操作整一個(gè)組件。
開篇先來(lái)一張圖
下圖是官方展示的生命周期圖
?
Vue實(shí)例的生命周期鉤子函數(shù)（8個(gè)）
?? ??? ?1. beforeCreate
?? ??? ??? ? 剛 new了一個(gè)組件，無(wú)法訪問(wèn)到數(shù)據(jù)和真實(shí)的dom，基本上這個(gè)好像不能干啥
?? ??? ?2. created
?? ??? ??? ?data屬性完成了賦值，可以對(duì)數(shù)據(jù)進(jìn)行修改但是不會(huì)觸發(fā)updated,在這里可以做初始數(shù)據(jù)的獲取
?? ??? ?3. beforeMount
?? ??? ??? ? render準(zhǔn)備要渲染了，函數(shù)中虛擬dom已經(jīng)創(chuàng)建完成，這時(shí)候改變數(shù)據(jù)也不會(huì)觸發(fā)update,在這里可以做初始數(shù)據(jù)的獲取
?? ??? ?4. mounted
?? ??? ?? ? ?開始render，渲染出真實(shí)dom，執(zhí)行mounted鉤子函數(shù)，組件已經(jīng)出現(xiàn)在頁(yè)面中，數(shù)據(jù)，事件，都DOM都處理好了。這里你? ? ? ? ? ? ? ? 可以改是進(jìn)行真實(shí)的DOM操作
?? ??? ?5. beforeUpdate
?? ??? ? ? ? 組件，實(shí)例數(shù)據(jù)更新之前會(huì)執(zhí)行的函數(shù)，虛擬DOM會(huì)重新構(gòu)建虛擬DOM，與上一次的虛擬DOM對(duì)比后重新渲染。切記不可? ? ? ? ? ? ? ? ? 進(jìn)行數(shù)據(jù)修改否則會(huì)出現(xiàn)死循環(huán)
?? ??? ?6. updated
?? ??? ? ? ? 更新完會(huì)執(zhí)行的函數(shù)，切記不可進(jìn)行數(shù)據(jù)修改否則會(huì)出現(xiàn)死循環(huán)
?? ??? ?7. beforeDestroy
?? ??? ??? ?實(shí)例被銷毀之前會(huì)執(zhí)行的函數(shù)，做善后的工作，清除計(jì)時(shí)器，清除非指令綁定的事件等等
?? ??? ?8. destroyed
?? ??? ?? ? ?實(shí)例被銷毀后會(huì)執(zhí)行的函數(shù)，也可以做善后工作。
class="hello"> Hello World!
console這樣一個(gè)輸出順序：
?
大概這樣一個(gè) 生命周期鉤子函數(shù)執(zhí)行的順序，包括我之前是用angular開發(fā)跟vue一樣 他也有自己的生命周期鉤子函數(shù)。
生命周期簡(jiǎn)單來(lái)說(shuō)就是一個(gè)組件從創(chuàng)建到初始化到銷毀的一個(gè)過(guò)程，在這個(gè)過(guò)程中有這些生命周期鉤子函數(shù)我們可以更方便的去操作整一個(gè)組件。
?
此隨筆乃本人學(xué)習(xí)工作記錄，如有疑問(wèn)歡迎在下面評(píng)論，轉(zhuǎn)載請(qǐng)標(biāo)明出處。
如果對(duì)您有幫助請(qǐng)動(dòng)動(dòng)鼠標(biāo)右下方給我來(lái)個(gè)贊，您的支持是我最大的動(dòng)力。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1762.html
摘要：生命周期簡(jiǎn)單來(lái)說(shuō)就是一個(gè)組件從創(chuàng)建到初始化到銷毀的一個(gè)過(guò)程，在這個(gè)過(guò)程中有這些生命周期鉤子函數(shù)我們可以更方便的去操作整一個(gè)組件。 Vue實(shí)例的生命周期鉤子函數(shù)（8個(gè)） beforeCreate 剛 new了一個(gè)組件，無(wú)法訪問(wèn)到數(shù)據(jù)和真實(shí)的dom，基本上這個(gè)好像不能干啥 created data屬性完成了賦值，可以對(duì)數(shù)據(jù)進(jìn)行修改但是不會(huì)觸發(fā)updated,在這里可以做初始數(shù)據(jù)的...
摘要：生命周期簡(jiǎn)單來(lái)說(shuō)就是一個(gè)組件從創(chuàng)建到初始化到銷毀的一個(gè)過(guò)程，在這個(gè)過(guò)程中有這些生命周期鉤子函數(shù)我們可以更方便的去操作整一個(gè)組件。 Vue實(shí)例的生命周期鉤子函數(shù)（8個(gè)） beforeCreate 剛 new了一個(gè)組件，無(wú)法訪問(wèn)到數(shù)據(jù)和真實(shí)的dom，基本上這個(gè)好像不能干啥 created data屬性完成了賦值，可以對(duì)數(shù)據(jù)進(jìn)行修改但是不會(huì)觸發(fā)updated,在這里可以做初始數(shù)據(jù)的...
摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快速搭建項(xiàng)目。 本文是關(guān)注微信小程序的開發(fā)和面試問(wèn)題，由基礎(chǔ)到困難循序漸進(jìn)，適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快...
閱讀 1430·2021-11-25 09:43
閱讀 2288·2021-09-27 13:36
閱讀 1140·2021-09-04 16:40
閱讀 1991·2019-08-30 11:12
閱讀 3339·2019-08-29 14:14
閱讀 594·2019-08-28 17:56
閱讀 1359·2019-08-26 13:50
閱讀 1275·2019-08-26 13:29
