Vue 的生命周期函數指的是在 Vue 實例從創建到銷毀期間,Vue 自動調用的一系列鉤子函數。這些函數可以響應特定的生命周期階段,在該階段完成一些初始化、掛載、渲染和銷毀等操作。
Vue 的生命周期分為8個階段,分別為:創建階段、初始化階段、掛載階段、更新階段、銷毀階段。這些階段可以由對應的生命周期函數進行鉤子,以完成特定的操作。
//生命周期示例 new Vue({ el: '#app', data: { msg: 'Hello, world!' }, beforeCreate: function () { console.log('beforeCreate: 在實例創建之前調用'); }, created: function () { console.log('created: 在實例創建完成之后調用'); }, beforeMount: function () { console.log('beforeMount: 在掛載之前調用'); }, mounted: function () { console.log('mounted: 實例掛載后調用'); }, beforeUpdate: function () { console.log('beforeUpdate: 數據更新前調用'); }, updated: function () { console.log('updated: 數據更新后調用') }, beforeDestroy: function () { console.log('beforeDestroy: 實例銷毀前調用') }, destroyed: function () { console.log('destroyed: 實例銷毀后調用') } })
在上述例子中,beforeCreate 鉤子函數在實例創建之前調用,created 鉤子函數在實例創建完成之后調用,這兩個鉤子函數主要用于初始化數據。
beforeMount 鉤子函數在掛載之前調用,mounted 鉤子函數在實例掛載后調用,這兩個鉤子函數用于渲染 DOM。
beforeUpdate 鉤子函數在數據更新前調用,updated 鉤子函數在數據更新后調用,這兩個鉤子函數主要用于響應數據的更改。
beforeDestroy 鉤子函數在實例銷毀前調用,destroyed 鉤子函數在實例銷毀后調用,這兩個鉤子函數主要用于清理與實例相關的內容。
Vue 的生命周期函數在開發中具有重要的作用,掌握不同階段對應的生命周期函數,可以更好的管理 Vue 實例的行為。