1. vue3 如何使用 mounted
   在 Vue 3 中，mounted 生命周期鉤子用于當(dāng)組件被掛載到 DOM 中后執(zhí)行一些操作。

這個鉤子非常適合用來執(zhí)行那些依賴于 DOM 的初始化工作，比如獲取元素的尺寸或者是與第三方的 DOM 有關(guān)的庫進行交互等。

下面是一個簡單的 Vue 3 組件示例，展示了如何使用 mounted 鉤子：

import { ref, onMounted } from 'vue'export default {setup() {const count = ref(0)// 在組件掛載完成后執(zhí)行onMounted(() => {console.log('Component is now mounted and ready')// 這里可以執(zhí)行任何需要在掛載完成后做的事情// 比如訪問真實的 DOM 元素const el = document.querySelector('#my-element')console.log(el)// 或者啟動一個輪詢定時器const interval = setInterval(() => {count.value++}, 1000)// 清理函數(shù)，在組件卸載前清除定時器return () => {clearInterval(interval)}})return { count }}
}

在這個例子中，onMounted 接受一個函數(shù)作為參數(shù)，該函數(shù)會在組件掛載到 DOM 后立即執(zhí)行。

這里也展示了如何在 onMounted 回調(diào)中返回一個清理函數(shù)，它會在組件卸載時被調(diào)用，這對于清除副作用（如定時器）非常有用。

注意，Vue 3 使用了 Composition API，因此傳統(tǒng)的選項式寫法中的生命周期鉤子（如 mounted）已經(jīng)被 setup() 函數(shù)中的 onMounted() 函數(shù)所替代。

如果你是從 Vue 2 升級到 Vue 3，這可能是需要注意的一個變化。

2. vue3 mounted 的觸發(fā)時機

在 Vue 3 中，mounted 生命周期鉤子的觸發(fā)時機是在組件實例被掛載到 DOM 后。

具體來說，這意味著以下幾點：

1. 實例創(chuàng)建完成：Vue 實例已經(jīng)完成了數(shù)據(jù)觀測（data observer）、屬性和方法的運算，以及指令配置。此時，數(shù)據(jù)模型已經(jīng)可以正常工作，但尚未開始第一次 DOM 渲染。
2. DOM 掛載完成：Vue 實例已經(jīng)完成了模板編譯和渲染，并且組件已經(jīng)被插入到父容器節(jié)點中，DOM 已經(jīng)被更新以反映組件的初始狀態(tài)。
3. $el 屬性可用 ：組件的 $el屬性已經(jīng)被創(chuàng)建并且可以訪問，這意味著你可以在這個階段通過this.$el 訪問到掛載后的 DOM 節(jié)點。
4. ref 屬性可用：所有注冊過的 ref 屬性都已經(jīng)解析，并且可以通過 this.$refs 訪問到它們引用的 DOM 元素或子組件實例。

簡而言之，mounted 鉤子是當(dāng)你需要在組件掛載后執(zhí)行一些操作時使用的理想位置，比如：

• 操作 DOM：由于組件已經(jīng)掛載到了 DOM 中，你現(xiàn)在可以安全地查詢或操作 DOM。
• 初始化第三方插件：很多第三方插件或庫需要一個已經(jīng)存在的 DOM 節(jié)點來初始化，mounted 是一個合適的時間點。
• 發(fā)送網(wǎng)絡(luò)請求：如果需要在組件加載時獲取數(shù)據(jù)，可以在 mounted 鉤子中發(fā)起網(wǎng)絡(luò)請求。
• 設(shè)置定時器：如果需要在組件掛載后定期執(zhí)行某些操作，可以在 mounted 鉤子中設(shè)置定時器。

import { ref, onMounted } from 'vue';export default {setup() {const message = ref('Hello, Vue 3!');onMounted(() => {console.log('Component has been mounted!');// 在這里可以安全地操作 DOMconst element = document.getElementById('app');console.log(element); // 輸出掛載后的 DOM 節(jié)點// 發(fā)送網(wǎng)絡(luò)請求fetch('https://api.example.com/data').then(response => response.json()).then(data => {console.log('Fetched data:', data);message.value = data.message; // 更新組件的狀態(tài)}).catch(error => {console.error('Error fetching data:', error);});});return { message };}
};

在這個示例中，當(dāng)組件掛載到 DOM 后，控制臺會打印一條消息，表示組件已經(jīng)掛載。

此外，還會發(fā)起一個網(wǎng)絡(luò)請求來獲取數(shù)據(jù)，并更新組件的狀態(tài)。這些都是在 mounted 鉤子中常見的操作。