vue 提供生命周期鉤子,在組件生命周期中執(zhí)行任務(wù)。這些鉤子按順序觸發(fā),包括:beforecreate:實(shí)例化組件前觸發(fā)。created:組件實(shí)例創(chuàng)建后觸發(fā)。beforemount:組件掛載到 dom 前觸發(fā)。mounted:組件掛載到 dom 后觸發(fā)。beforeupdate:組件 props 或 data 改變前觸發(fā)。updated:組件更新后觸發(fā)。beforedestroy:組件銷(xiāo)毀前觸發(fā)。destroyed:組件銷(xiāo)毀后觸發(fā)。
Vue 生命周期
Vue.js 提供了一個(gè)生命周期鉤子系統(tǒng),用于在組件的生命周期中執(zhí)行特定任務(wù)。這些鉤子可以幫助你管理組件狀態(tài)、執(zhí)行副作用和響應(yīng)用戶(hù)交互。
Vue 生命周期階段
Vue 的生命周期包括以下階段:
beforeCreate:創(chuàng)建組件實(shí)例之前觸發(fā)。
created:組件實(shí)例已創(chuàng)建,但尚未掛載。
beforeMount:組件已掛載到 DOM 之前觸發(fā)。
mounted:組件已成功掛載到 DOM。
beforeUpdate:組件的 props 或 data 發(fā)生變化之前觸發(fā)。
updated:組件已更新。
beforeDestroy:組件被銷(xiāo)毀之前觸發(fā)。
destroyed:組件已被銷(xiāo)毀。
生命周期鉤子的作用
每個(gè)生命周期鉤子都有特定的作用:
beforeCreate:
設(shè)置默認(rèn)數(shù)據(jù)和屬性。
注冊(cè)方法。
created:
發(fā)起 HTTP 請(qǐng)求以獲取數(shù)據(jù)。
訂閱事件。
beforeMount:
操作 DOM 元素(例如,添加事件監(jiān)聽(tīng)器)。
延遲操作,直到組件掛載后才進(jìn)行。
mounted:
組件已掛載到 DOM,可以與用戶(hù)進(jìn)行交互。
訪問(wèn) DOM 元素。
beforeUpdate:
響應(yīng)屬性或數(shù)據(jù)更改。
更新內(nèi)部狀態(tài)。
updated:
對(duì)更新后的 DOM 元素進(jìn)行操作。
觸發(fā)其他操作。
beforeDestroy:
取消 HTTP 請(qǐng)求。
取消訂閱事件。
清理內(nèi)存占用。
destroyed:
銷(xiāo)毀組件實(shí)例。
釋放所有資源。