本文例項為大家分享了3生命週期鉤子函式的具體程式碼，供大家參考，具體內容如下

一、Vue3生命週期鉤子

setup() : 開始建立元件之前，在 beforeCreate 和 created 之前執行，建立的是 data 和 method
onBeforeMount() : 元件掛載到節點上之前執行的函式；
onMounted() : 元件掛載完成後執行的函式；
onBeforeUpdate(): 元件更新之前執行的函式；
onUpdated(): 元件更新完成之後執行的函式；
onBeforeUnmount(): 元件解除安裝之前執行的函式；
onUnmounted(): 元件解除安裝完成後執行的函式；

二、Vue2.x 和 Vue3.x 生命週期對比

三、Vue3生命週期鉤子函式的簡單使用

<template>
 <div>
  <h1>Vue3生命週期鉤子函式</h1>
  <h2>響應式攔截資料data的值是：{{mswhNXrOijwrg}}</h2>
  <p><button @click="changeMsg">點選改變msg</button></p>
 </div>
</template>

<script>
import { reactive,onUnmounted,onUpdated,onMounted,toRefs } from 'vue'; // 引入需要的
export default {
 setup () {
  // 初始化專案工作都放在setup中
  console.log("當前應用程式被安裝了");
  const state = reactive({ // 定義狀態
   msg: '學而時習之',// 定義變數
   changeMsg: () => { // 定義方法
    state.msg = '不亦說乎'
   }
  })
  let timer = 0;
  letwww.cppcns.com
 
 count = 0;
  onMounted(() => {
   console.log('頁面掛載完成，觸發了onMounted鉤子函式');
   timer = setInterval(() => {
    console.log('定時器正在執行中',count++)
   },1000)
  })
  onUpdated(() => {
   console.log('資料發生了更新，觸發了onUpdated鉤子函式')
  })
  onUnmounted(() => {
   console.log('頁面/元件退出，觸發了onUnmounted鉤子函式')
   // 如果不清楚，這些非同步的行為就會常駐在記憶體中，一定程度上會造成常駐記憶體的不必要消耗，造成記憶體洩露
   clearInterval(timer);
  })
  return {
   ...toRefs(state)
  }
 }
}
</script>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。