資訊專欄INFORMATION COLUMN
摘要：組件的生命周期每一個(gè)組件或者實(shí)例都會(huì)經(jīng)歷一個(gè)完整的生命周期，總共分為三個(gè)階段初始化運(yùn)行中銷毀生命周期圖示實(shí)例組件通過創(chuàng)建出來之后會(huì)初始化事件和生命周期，然后就會(huì)執(zhí)行鉤子函數(shù)，這個(gè)時(shí)候，數(shù)據(jù)還沒有掛載，只是一個(gè)空殼，無法訪問到數(shù)據(jù)和真實(shí)的，一
組件的生命周期
每一個(gè)組件或者實(shí)例都會(huì)經(jīng)歷一個(gè)完整的生命周期，總共分為三個(gè)階段：初始化、運(yùn)行中、銷毀
生命周期圖示
實(shí)例、組件通過new Vue() 創(chuàng)建出來之后會(huì)初始化事件和生命周期，然后就會(huì)執(zhí)行beforeCreate鉤子函數(shù)，這個(gè)時(shí)候，數(shù)據(jù)還沒有掛載ね，只是一個(gè)空殼，無法訪問到數(shù)據(jù)和真實(shí)的dom，一般不做操作
掛載數(shù)據(jù)，綁定事件等等，然后執(zhí)行created函數(shù)，這個(gè)時(shí)候已經(jīng)可以使用到數(shù)據(jù)，也可以更改數(shù)據(jù),在這里更改數(shù)據(jù)不會(huì)觸發(fā)updated函數(shù)，在這里可以在渲染前倒數(shù)第二次更改數(shù)據(jù)的機(jī)會(huì)，不會(huì)觸發(fā)其他的鉤子函數(shù)，一般可以在這里做初始數(shù)據(jù)的獲取
接下來開始找實(shí)例或者組件對(duì)應(yīng)的模板，編譯模板為虛擬dom放入到render函數(shù)中準(zhǔn)備渲染，然后執(zhí)行beforeMount鉤子函數(shù)，在這個(gè)函數(shù)中虛擬dom已經(jīng)創(chuàng)建完成，馬上就要渲染,在這里也可以更改數(shù)據(jù)，不會(huì)觸發(fā)updated，在這里可以在渲染前最后一次更改數(shù)據(jù)的機(jī)會(huì)，不會(huì)觸發(fā)其他的鉤子函數(shù)，一般可以在這里做初始數(shù)據(jù)的獲取
接下來開始render，渲染出真實(shí)dom，然后執(zhí)行mounted鉤子函數(shù)，此時(shí)，組件已經(jīng)出現(xiàn)在頁(yè)面中，數(shù)據(jù)、真實(shí)dom都已經(jīng)處理好了,事件都已經(jīng)掛載好了，可以在這里操作真實(shí)dom等事情...
當(dāng)組件或?qū)嵗臄?shù)據(jù)更改之后，會(huì)立即執(zhí)行beforeUpdate，然后vue的虛擬dom機(jī)制會(huì)重新構(gòu)建虛擬dom與上一次的虛擬dom樹利用diff算法進(jìn)行對(duì)比之后重新渲染，一般不做什么事兒
當(dāng)更新完成后，執(zhí)行updated，數(shù)據(jù)已經(jīng)更改完成，dom也重新render完成，可以操作更新后的虛擬dom
當(dāng)經(jīng)過某種途徑調(diào)用$destroy方法后，立即執(zhí)行beforeDestroy，一般在這里做一些善后工作，例如清除計(jì)時(shí)器、清除非指令綁定的事件等等
組件的數(shù)據(jù)綁定、監(jiān)聽...去掉后只剩下dom空殼，這個(gè)時(shí)候，執(zhí)行destroyed，在這里做善后工作也可以
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90366.html
摘要：中的生命周期函數(shù)也可以稱之為生命周期鉤子函數(shù)，在特定的時(shí)期，調(diào)用特定的函數(shù)。吊起鉤子函數(shù)調(diào)起鉤子函數(shù)問題為什么是一個(gè)數(shù)組卸載組件，會(huì)觸發(fā)一個(gè)這行代碼之后發(fā)生了什么背后實(shí)現(xiàn)原理。 簡(jiǎn)介 關(guān)于Vue的生命周期函數(shù)，目前網(wǎng)上有許多介紹文章，但也都只是分析了表象。這篇文檔，將結(jié)合Vue源碼分析，為什么會(huì)有這樣的表象。 Vue中的生命周期函數(shù)也可以稱之為生命周期鉤子（hook）函數(shù)，在特定的時(shí)期...
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
摘要：關(guān)于生命周期的思考關(guān)于組件生命周期，官方圖示在開發(fā)過程中遇到關(guān)于生命周期的問題，整理分享下跳轉(zhuǎn)同名路徑的問題問題來自跳轉(zhuǎn)同名路徑的問題在社區(qū)交流中對(duì)于新手經(jīng)常遇到這個(gè)問題。如何強(qiáng)制更新組件的生命周期解決辦法是數(shù)據(jù)更新的時(shí)候。 關(guān)于Vue生命周期的思考 關(guān)于Vue組件生命周期，官方圖示： showImg(http://vuejs.org.cn/images/lifecycle.png);...
閱讀 1062·2021-11-18 10:02
閱讀 1315·2021-09-23 11:22
閱讀 2621·2021-08-21 14:08
閱讀 1647·2019-08-30 15:55
閱讀 1733·2019-08-30 13:45
閱讀 3179·2019-08-29 16:52
閱讀 3102·2019-08-29 12:18
閱讀 1650·2019-08-26 13:36
