在Vue中,activated生命周期鉤子函數是在組件被激活時調用的函數。當一個組件剛剛被創建并加入到頁面中時,activated函數不會執行。只有當組件被切換到激活狀態時,activated函數才會被觸發。
與activated鉤子函數對應的是deactivated鉤子函數。當一個組件從激活狀態切換到非激活狀態時,deactivated函數會被調用;當組件被銷毀時,activated和deactivated函數都不會被執行。
export default { activated() { console.log('組件被激活了') }, deactivated() { console.log('組件被停用了') } }
在使用activated鉤子函數時,我們通常會結合keep-alive組件來使用。keep-alive是Vue內置的一個抽象組件,用于緩存組件的狀態。通過將keep-alive標簽包裹在需要緩存的組件外部,可以讓組件在切換時保持狀態不變,從而提高應用的性能。
除了用于緩存組件狀態之外,activated函數還可以用于一些其他的場景。例如,在組件中動態獲取數據,可以將數據獲取的邏輯放在activated函數中,這樣每次切換到組件時都會重新獲取最新的數據。
export default { data () { return { list: [] } }, activated () { this.getList() }, methods: { getList () { // 請求數據 axios.get('/api/list').then(res =>{ this.list = res.data }) } } }