快捷導(dǎo)航

Vue使用 onMounted 確保在組件掛載后執(zhí)行異步操作示例詳解

更新時(shí)間：2023年06月29日 11:01:14 作者：謝爾登

在 Vue.js 或其他類似框架中，使用 onMounted 是為了確保在組件掛載后執(zhí)行異步操作，這篇文章主要介紹了Vue使用onMounted確保在組件掛載后執(zhí)行異步操作,需要的朋友可以參考下

Vue使用 onMounted 確保在組件掛載后執(zhí)行異步操作

在 Vue.js 或其他類似框架中，使用 onMounted 是為了確保在組件掛載后執(zhí)行異步操作。

組件的生命周期鉤子函數(shù) onMounted 是在組件掛載到 DOM 后執(zhí)行的鉤子函數(shù)。在該鉤子函數(shù)中執(zhí)行異步操作可以保證組件已經(jīng)完全渲染，并且 DOM 元素已經(jīng)存在，從而避免在組件還未掛載或尚未完全初始化時(shí)執(zhí)行異步操作導(dǎo)致的問(wèn)題。

以下是一個(gè)示例來(lái)說(shuō)明為什么要在 onMounted 中執(zhí)行異步操作：

import { onMounted } from 'vue';
export default {
  setup() {
    onMounted(async () => {
      // 異步操作
      await fetchData();
    });
  }
}

在上面的代碼中，使用了 Vue 3 的 Composition API 中的 onMounted 鉤子函數(shù)。通過(guò)在 setup 函數(shù)中調(diào)用 onMounted，可以將異步操作綁定到組件掛載后執(zhí)行。

如果不將異步操作放在 onMounted 中，而是直接在 setup 函數(shù)中執(zhí)行，可能會(huì)出現(xiàn)以下問(wèn)題：

組件尚未完全掛載：在組件的 setup 階段，組件的 DOM 元素可能還未完全創(chuàng)建或渲染。如果在這個(gè)階段執(zhí)行異步操作，可能無(wú)法獲取到正確的 DOM 元素或執(zhí)行預(yù)期的操作。
異步操作的依賴項(xiàng)不可用：在組件的 setup 階段，一些異步操作所依賴的數(shù)據(jù)可能還未被初始化或加載。如果在這個(gè)階段執(zhí)行異步操作，可能無(wú)法正確地獲取或處理依賴項(xiàng)的數(shù)據(jù)。

通過(guò)將異步操作放在 onMounted 鉤子函數(shù)中，可以確保在組件已經(jīng)掛載到 DOM 后執(zhí)行異步操作，保證了組件已經(jīng)完全初始化，并且相關(guān)的 DOM 元素和數(shù)據(jù)可用。

需要注意的是，onMounted 是 Vue 3 中的鉤子函數(shù)，在 Vue 2 中可以使用 mounted 鉤子函數(shù)來(lái)實(shí)現(xiàn)類似的效果。

Vue如何在onMounted鉤子中使用data中的數(shù)據(jù)

前景提要：onMounted鉤子是vue3新添加的特性，屬于組合式api，在setup中調(diào)用，而setup相當(dāng)于組件編譯的入口，setup在beforeCreate鉤子執(zhí)行前運(yùn)行，此時(shí)只初始化了prop（屬性）和context等，而data是在beforeCreate鉤子之后created之前執(zhí)行的。

注意：onMounted雖然寫(xiě)在setup函數(shù)中，但卻是在組件掛載到父組件時(shí)才被調(diào)用的。

方法：由于setup中不能使用this，因此需要使用getCurrentInstance 方法獲得當(dāng)前活躍的組件，具體方式見(jiàn)代碼。

<template>
  <div>
    <p>{{ aa.a }}</p>
    <p>{{ b }}</p>
  </div>
</template>
<script>
import { reactive, onMounted,getCurrentInstance } from "vue";
export default {
  data() {
    return {
      b: 111,
    };
  },
  setup(props) {
    const aa = reactive({
      a: 1,
    });
    const ins = getCurrentInstance();
    // console.log(b)
    onMounted(() => {
      console.log("hello");
      console.log(ins)
      // 注意數(shù)據(jù)b和a的使用方法
      console.log(ins.data.b)
      console.log(aa.a)
    });
    return {
      aa,
    };
  },
};
</script>
<style>
</style>

到此這篇關(guān)于Vue使用 onMounted 確保在組件掛載后執(zhí)行異步操作的文章就介紹到這了,更多相關(guān)Vue使用 onMounted 組件掛載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: