vue3生命周期原理與函數(shù)應(yīng)用的方法是什么

這篇“vue3生命周期原理與函數(shù)應(yīng)用的方法是什么”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“vue3生命周期原理與函數(shù)應(yīng)用的方法是什么”文章吧。

原理概述

Vue 3的生命周期（Lifecycle）指的是組件從創(chuàng)建到銷毀經(jīng)歷的一系列事件，在這些事件中可以執(zhí)行一些操作，例如初始化數(shù)據(jù)、渲染視圖、加載異步數(shù)據(jù)等。在Vue 3中，通過(guò)setup()函數(shù)來(lái)定義組件的生命周期。

實(shí)例分析

Vue 3的生命周期包含了以下幾個(gè)階段：

1. beforeCreate

在實(shí)例創(chuàng)建之前，即在初始化之前被調(diào)用。此時(shí)，尚未初始化組件實(shí)例，無(wú)法訪問(wèn)data、methods和computed等屬性，在組件狀態(tài)初始化之前執(zhí)行一些操作。

export default {
  beforeCreate() {
    console.log('beforeCreate');
  }
}

2. created

在實(shí)例創(chuàng)建之后，即在初始化之后被調(diào)用。此時(shí)，已經(jīng)完成了數(shù)據(jù)觀測(cè)等配置，但尚未掛載DOM，并且可以訪問(wèn)data、methods和computed等屬性?？梢允褂胏reated鉤子函數(shù)進(jìn)行數(shù)據(jù)初始化和事件的監(jiān)聽等操作。

import { onMounted, onUnmounted } from 'vue';

export default {
  data() {
    return {
      count: 0
    };
  },
  created() {
    console.log('created');
  },
  mounted() {
    onMounted(() => {
      console.log('component mounted');
    });
  },
  unmounted() {
    onUnmounted(() => {
      console.log('component unmounted');
    });
  }
}

3. beforeMount

在掛載開始之前被調(diào)用。在此階段中，尚未渲染真實(shí)的DOM節(jié)點(diǎn)?？梢允褂胋eforeMount鉤子函數(shù)，在組件掛載之前進(jìn)行一些異步操作，例如加載動(dòng)畫等。

export default {
  beforeMount() {
    console.log('beforeMount');
  }
}

4. mounted

在掛載結(jié)束后被調(diào)用。此時(shí)，組件已經(jīng)渲染出真實(shí)的DOM。mounted鉤子函數(shù)往往用于初始化DOM操作以及與服務(wù)器交互后填充組件的數(shù)據(jù)，例如通過(guò)ref獲取DOM節(jié)點(diǎn)和注冊(cè)事件監(jiān)聽器等。

export default {
  mounted() {
    console.log('mounted');
    const button = this.$refs.myButton;
    button.addEventListener('click', () => {
      this.count++;
    });
  }
}

5. beforeUpdate

在數(shù)據(jù)更新之前被調(diào)用。此時(shí)，可以在更新之前訪問(wèn)舊的數(shù)據(jù)狀態(tài)?？梢允褂胋eforeUpdate鉤子函數(shù)，在組件數(shù)據(jù)更新之前執(zhí)行一些操作，例如動(dòng)態(tài)綁定class和style等。

export default {
  beforeUpdate() {
    console.log('beforeUpdate');
  }
}

6. updated

在數(shù)據(jù)更新之后被調(diào)用。此時(shí)，組件已經(jīng)更新DOM，可以通過(guò)訪問(wèn)最新的數(shù)據(jù)狀態(tài)來(lái)完成DOM的操作?？梢允褂胾pdated鉤子函數(shù)，在組件數(shù)據(jù)更新之后執(zhí)行一些操作，例如觸發(fā)動(dòng)畫效果等。

export default {
  updated() {
    console.log('updated');
  }
}

7. beforeUnmount

在組件卸載之前被調(diào)用。此時(shí)，組件實(shí)例仍然完全可用，但是它的視圖已經(jīng)被銷毀并且不再更新?？梢允褂胋eforeUnmount鉤子函數(shù)，在組件卸載之前執(zhí)行一些清理操作，例如取消事件監(jiān)聽器、定時(shí)器和異步請(qǐng)求等。

export default {
  beforeUnmount() {
    console.log('beforeUnmount');
  }
}

8. unmounted

在組件卸載之后被調(diào)用。此時(shí)，組件實(shí)例以及其所有相關(guān)聯(lián)的DOM元素均已銷毀，無(wú)法再訪問(wèn)組件內(nèi)部數(shù)據(jù)和方法?？梢允褂胾nmounted鉤子函數(shù)，在組件卸載之后執(zhí)行一些最終清理操作。

export default {
  unmounted() {
    console.log('unmounted');
  }
}

需要注意的是，Vue 3中去掉了一些生命周期函數(shù)，例如activated、deactivated和errorCaptured等，這些可以通過(guò)新的Composition API來(lái)實(shí)現(xiàn)。

以上就是關(guān)于“vue3生命周期原理與函數(shù)應(yīng)用的方法是什么”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。