vue 2 提供了 10 個生命周期鉤子函數(shù),分別在不同應用程序生命周期階段執(zhí)行,包括初始化(beforecreate)、創(chuàng)建(created)、掛載(beforemount、mounted)、更新(beforeupdate、updated)、激活/停用(activated、deactivated)和銷毀(beforedestroy、destroyed),允許開發(fā)人員在特定時刻自定義應用程序行為,例如初始化數(shù)據(jù)、操縱 dom、執(zhí)行動畫或清理資源等。
Vue 2 生命周期鉤子函數(shù)
概述
Vue 2 生命周期鉤子函數(shù)是在不同應用程序生命周期階段執(zhí)行的函數(shù)。這些函數(shù)允許開發(fā)人員在特定時刻自定義應用程序行為,例如在創(chuàng)建、掛載和銷毀組件時。
生命周期鉤子函數(shù)
Vue 2 提供了以下生命周期鉤子函數(shù):
beforeCreate:在實例初始化后立即執(zhí)行。
created:在實例創(chuàng)建完成后執(zhí)行。
beforeMount:在掛載元素到 DOM 之前執(zhí)行。
mounted:在掛載元素到 DOM 之后執(zhí)行。
beforeUpdate:在更新 DOM 之前執(zhí)行。
updated:在更新 DOM 之后執(zhí)行。
activated:在子組件激活時執(zhí)行(僅限 keep-alive)。
deactivated:在子組件停用時執(zhí)行(僅限 keep-alive)。
beforeDestroy:在銷毀實例之前執(zhí)行。
destroyed:在銷毀實例之后執(zhí)行。
作用
生命周期鉤子函數(shù)用于在以下常見場景中執(zhí)行操作:
初始化數(shù)據(jù)和方法(created)
操縱 DOM(mounted)
響應狀態(tài)變化(beforeUpdate、updated)
執(zhí)行動畫或過渡(activated、deactivated)
清理資源(beforeDestroy、destroyed)
示例
考慮一個簡單的 Vue 組件:
<template><div>{{ message }}</div> </template><script> export default { data() { return { message: 'Hello, Vue!' }; }, mounted() { console.log('Component has been mounted.'); }, beforeDestroy() { console.log('Component will be destroyed.'); }, }; </script>
登錄后復制
在此示例中:
created 鉤子函數(shù)用于初始化 message 數(shù)據(jù)。
mounted 鉤子函數(shù)用于在將組件掛載到 DOM 后記錄一條消息。
beforeDestroy 鉤子函數(shù)用于在組件被銷毀之前記錄一條消息。