iT邦幫忙

2023 iThome 鐵人賽

0
Vue.js

從0開始學習30天可以到什麼程度?系列 第 25

No25: 生命週期與 Hooks function

  • 分享至 

  • xImage
  •  

在Vue.js裡面,每一個實體都是一個元件而每一個元件都有屬於他們不同階段的生命週期,Vue.js有提供讓我們針對特定週期進行處理的callback finction,也叫做生命週期的hooks function。
而在Vue3.0 Composition API中,使用的名稱與前面的版本有一些不同,辦除了幾個特定的有較大變化,其他大部分指令都只是在前面加上on,而因為Vue3.0針對2.0有提供向下相容所以2.0的指令到了3.0也還是可以使用。
對於hooks function的使用方法很直觀在實體屬性裡加上想要指定的hooks function,在這個實體的生命週期到指定的階段就會執行這個hooks function,當然他也和Vue中其他程式一樣需要mount算被執行。
比如: 指定他在執行到created階段在console留下created紀錄

  created () {
    console.log('created');
  },

這樣就可以指定它在程式的實體已經被建立,狀態與事件初始化的階段在console留下紀錄。

要注意的是hooks需要透過this來存取實體所以不能使用箭頭函數,也不能被加在methods裡面。而要使用unmount()來卸載元件也不可以在Vue.createApp時直接.mount()的情況下,需要將mount()分開執行才可以成功執行unmount()。


上一篇
No24: v-for&key
下一篇
No26: Vue實體生命週期
系列文
從0開始學習30天可以到什麼程度?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言