Vue 3 onMounted 中控制同步與異步執(zhí)行策略的方案詳解
更新時間：2026年03月21日 09:07:30 作者：FlyBeautySky
在Vue 3的onMounted鉤子中,控制多個函數的同步和異步執(zhí)行有多種方法,本文給大家分享Vue 3 onMounted 中控制同步與異步執(zhí)行策略的方案,感興趣的朋友跟隨小編一起看看吧
在 Vue 3 的 onMounted 鉤子中，控制多個函數的同步和異步執(zhí)行有多種方法。以下是詳細的技術方案：
?? 核心概念對比
| 執(zhí)行方式 | 特點 | 適用場景 |
|---|---|---|
| 同步執(zhí)行 | 順序執(zhí)行，前一個完成后才開始下一個 | 有依賴關系的操作 |
| 并行執(zhí)行 | 同時啟動，等待所有完成 | 獨立的任務，提高效率 |
| 按條件執(zhí)行 | 根據條件決定是否執(zhí)行 | 條件加載、權限控制 |
一、同步執(zhí)行控制
1.基本同步順序執(zhí)行
<script setup>
import { onMounted } from 'vue'
onMounted(() => {
console.log('1. 開始同步執(zhí)行')
// 函數1
const result1 = function1()
console.log('函數1完成:', result1)
// 函數2（依賴函數1的結果）
const result2 = function2(result1)
console.log('函數2完成:', result2)
// 函數3（依賴函數2的結果）
const result3 = function3(result2)
console.log('函數3完成:', result3)
console.log('所有同步函數執(zhí)行完成')
})
function function1() {
console.log('執(zhí)行 function1')
return 'function1 的結果'
}
function function2(input) {
console.log('執(zhí)行 function2，輸入:', input)
return input + ' -> 經過function2處理'
}
function function3(input) {
console.log('執(zhí)行 function3，輸入:', input)
return input + ' -> 經過function3處理'
}
</script>輸出：
1. 開始同步執(zhí)行
執(zhí)行 function1
函數1完成: function1 的結果
執(zhí)行 function2，輸入: function1 的結果
函數2完成: function1 的結果 -> 經過function2處理
執(zhí)行 function3，輸入: function1 的結果 -> 經過function2處理
函數3完成: function1 的結果 -> 經過function2處理 -> 經過function3處理
所有同步函數執(zhí)行完成
2.使用 async/await 控制異步函數同步執(zhí)行
<script setup>
import { onMounted } from 'vue'
onMounted(async () => {
console.log('?? 開始順序執(zhí)行異步任務')
try {
// 1. 等待第一個異步任務完成
const user = await fetchUserData()
console.log('? 用戶數據獲取完成:', user.name)
// 2. 等待第二個異步任務（依賴第一個結果）
const orders = await fetchUserOrders(user.id)
console.log('? 訂單數據獲取完成，數量:', orders.length)
// 3. 等待第三個異步任務
const analytics = await initAnalytics(orders)
console.log('? 分析工具初始化完成')
console.log('?? 所有任務順序執(zhí)行完成')
} catch (error) {
console.error('? 執(zhí)行失敗:', error)
}
})
// 模擬異步函數
async function fetchUserData() {
return new Promise(resolve => {
setTimeout(() => {
resolve({ id: 1, name: '張三' })
}, 1000)
})
}
async function fetchUserOrders(userId) {
return new Promise(resolve => {
setTimeout(() => {
resolve([{ id: 1, product: '商品A' }, { id: 2, product: '商品B' }])
}, 1500)
})
}
async function initAnalytics(orders) {
return new Promise(resolve => {
setTimeout(() => {
resolve({ events: orders.length })
}, 500)
})
}
</script>執(zhí)行時間：約 3 秒（1000 + 1500 + 500）
二、并行執(zhí)行控制
1.使用 Promise.all 并行執(zhí)行
<script setup>
import { onMounted, ref } from 'vue'
const loading = ref(true)
const data = ref({})
onMounted(async () => {
console.log('?? 開始并行執(zhí)行任務')
const startTime = Date.now()
try {
// 并行執(zhí)行所有異步任務
const [userData, configData, permissions] = await Promise.all([
fetchUserData(),
fetchConfigData(),
fetchUserPermissions()
])
const endTime = Date.now()
console.log(`? 所有并行任務完成，耗時: ${endTime - startTime}ms`)
// 整合數據
data.value = { ...userData, ...configData, permissions }
loading.value = false
console.log('?? 數據整合完成:', data.value)
} catch (error) {
console.error('? 并行執(zhí)行失敗:', error)
loading.value = false
}
})
async function fetchUserData() {
return new Promise(resolve => {
setTimeout(() => {
console.log('? 用戶數據獲取完成')
resolve({ name: '張三', age: 25 })
}, 2000) // 模擬2秒延遲
})
}
async function fetchConfigData() {
return new Promise(resolve => {
setTimeout(() => {
console.log('? 配置數據獲取完成')
resolve({ theme: 'dark', language: 'zh-CN' })
}, 1500) // 模擬1.5秒延遲
})
}
async function fetchUserPermissions() {
return new Promise(resolve => {
setTimeout(() => {
console.log('? 權限數據獲取完成')
resolve(['read', 'write', 'delete'])
}, 1000) // 模擬1秒延遲
})
}
</script>輸出：
?? 開始并行執(zhí)行任務
? 權限數據獲取完成
? 配置數據獲取完成
? 用戶數據獲取完成
? 所有并行任務完成，耗時: 2002ms
?? 數據整合完成: {name: '張三', age: 25, theme: 'dark', language: 'zh-CN', permissions: ['read', 'write', 'delete']}
總耗時：約 2 秒（最慢的任務耗時）
2.使用 Promise.allSettled 處理并行任務（不因失敗中斷）
<script setup>
import { onMounted, ref } from 'vue'
const results = ref({})
onMounted(async () => {
console.log('?? 開始并行執(zhí)行任務（包含容錯）')
// 使用 allSettled，即使某個任務失敗也不會中斷
const settledResults = await Promise.allSettled([
fetchUserData(),
fetchConfigData(),
fetchUserPermissions(),
fetchOptionalData() // 這個可能失敗
])
// 處理結果
const successResults = {}
const failedResults = {}
settledResults.forEach((result, index) => {
if (result.status === 'fulfilled') {
successResults[`task${index}`] = result.value
} else {
failedResults[`task${index}`] = result.reason
}
})
results.value = { success: successResults, failed: failedResults }
console.log('?? 執(zhí)行結果:', results.value)
})
async function fetchUserData() {
return Promise.resolve({ user: '張三' })
}
async function fetchConfigData() {
return Promise.resolve({ theme: 'dark' })
}
async function fetchUserPermissions() {
return Promise.resolve(['read', 'write'])
}
async function fetchOptionalData() {
// 模擬可能失敗的任務
return new Promise((resolve, reject) => {
setTimeout(() => {
if (Math.random() > 0.5) {
resolve({ optional: 'data' })
} else {
reject(new Error('Optional data fetch failed'))
}
}, 500)
})
}
</script>三、混合執(zhí)行策略
1.分組并行 + 順序執(zhí)行
<script setup>
import { onMounted, ref } from 'vue'
const executionLog = ref([])
onMounted(async () => {
console.log('?? 開始混合執(zhí)行策略')
addLog('開始執(zhí)行')
try {
// 階段1：并行加載不依賴的數據
addLog('階段1: 并行加載基礎數據')
const [user, config] = await Promise.all([
fetchUserData(),
fetchConfigData()
])
addLog('階段1完成')
// 階段2：順序執(zhí)行依賴任務
addLog('階段2: 順序加載依賴數據')
const orders = await fetchUserOrders(user.id)
addLog('訂單數據加載完成')
const analytics = await initAnalytics(orders)
addLog('分析工具初始化完成')
// 階段3：并行執(zhí)行最后步驟
addLog('階段3: 并行執(zhí)行清理和通知')
await Promise.all([
sendAnalytics(analytics),
updateUserLastLogin(user.id)
])
addLog('階段3完成')
addLog('?? 所有任務完成')
} catch (error) {
addLog(`? 執(zhí)行失敗: ${error.message}`)
}
})
function addLog(message) {
const timestamp = new Date().toLocaleTimeString()
executionLog.value.push(`${timestamp}: ${message}`)
console.log(message)
}
// 模擬函數
async function fetchUserData() {
await delay(1000)
return { id: 1, name: '張三' }
}
async function fetchConfigData() {
await delay(800)
return { theme: 'dark' }
}
async function fetchUserOrders() {
await delay(1200)
return [{ id: 1 }, { id: 2 }]
}
async function initAnalytics() {
await delay(600)
return { initialized: true }
}
async function sendAnalytics() {
await delay(300)
}
async function updateUserLastLogin() {
await delay(400)
}
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms))
}
</script>執(zhí)行時間：約 3.6 秒（1000 + 1200 + 600 + 400）
2.帶并發(fā)限制的并行執(zhí)行
<script setup>
import { onMounted, ref } from 'vue'
const tasks = ref(Array.from({ length: 10 }, (_, i) => ({
id: i + 1,
status: 'pending',
result: null
})))
onMounted(async () => {
console.log('?? 開始帶并發(fā)限制的執(zhí)行')
// 并發(fā)數限制為3
const concurrencyLimit = 3
const taskPromises = tasks.value.map(task => task.id)
// 分批次執(zhí)行
for (let i = 0; i < taskPromises.length; i += concurrencyLimit) {
const batch = taskPromises.slice(i, i + concurrencyLimit)
console.log(`執(zhí)行批次 ${i / concurrencyLimit + 1}: 任務 ${batch.join(', ')}`)
// 并行執(zhí)行當前批次
const batchPromises = batch.map(async taskId => {
const task = tasks.value.find(t => t.id === taskId)
task.status = 'running'
try {
const result = await simulateTask(taskId)
task.status = 'completed'
task.result = result
console.log(`? 任務 ${taskId} 完成`)
} catch (error) {
task.status = 'failed'
task.result = error.message
console.log(`? 任務 ${taskId} 失敗`)
}
})
// 等待當前批次所有任務完成
await Promise.all(batchPromises)
}
console.log('?? 所有批次執(zhí)行完成')
})
async function simulateTask(taskId) {
// 模擬隨機耗時任務
const duration = 500 + Math.random() * 1000
await delay(duration)
// 模擬10%的失敗率
if (Math.random() < 0.1) {
throw new Error(`任務 ${taskId} 模擬失敗`)
}
return `任務 ${taskId} 結果，耗時 ${Math.round(duration)}ms`
}
</script>四、高級控制模式
1.使用隊列控制執(zhí)行順序
<script setup>
import { onMounted, ref } from 'vue'
class TaskQueue {
constructor(concurrency = 1) {
this.concurrency = concurrency
this.running = 0
this.queue = []
}
add(task) {
return new Promise((resolve, reject) => {
this.queue.push({ task, resolve, reject })
this.run()
})
}
run() {
while (this.running < this.concurrency && this.queue.length) {
const { task, resolve, reject } = this.queue.shift()
this.running++
task()
.then(resolve)
.catch(reject)
.finally(() => {
this.running--
this.run()
})
}
}
}
const executionOrder = ref([])
onMounted(async () => {
console.log('?? 使用隊列控制執(zhí)行順序')
// 創(chuàng)建并發(fā)數為2的隊列
const queue = new TaskQueue(2)
// 添加任務到隊列
const tasks = [
() => simulateTask('任務A', 1000),
() => simulateTask('任務B', 800),
() => simulateTask('任務C', 1200),
() => simulateTask('任務D', 600),
() => simulateTask('任務E', 900)
]
// 記錄執(zhí)行順序
const addToOrder = (taskName) => {
executionOrder.value.push({
time: Date.now(),
task: taskName
})
}
// 并行執(zhí)行所有任務（但限制并發(fā)數）
const startTime = Date.now()
addToOrder('開始執(zhí)行')
await Promise.all(tasks.map((task, index) =>
queue.add(async () => {
addToOrder(`開始 ${task.name}`)
await task()
addToOrder(`完成 ${task.name}`)
})
))
addToOrder(`全部完成，總耗時: ${Date.now() - startTime}ms`)
console.log('?? 執(zhí)行順序:', executionOrder.value)
})
async function simulateTask(name, duration) {
console.log(`開始執(zhí)行 ${name}`)
await delay(duration)
console.log(`完成 ${name}`)
return name
}
</script>2.使用 async/await 生成器控制流程
<script setup>
import { onMounted, ref } from 'vue'
const steps = ref([])
onMounted(async () => {
console.log('?? 使用生成器控制執(zhí)行流程')
// 定義任務生成器
async function* taskGenerator() {
steps.value.push('1. 初始化')
yield await initApp()
steps.value.push('2. 加載用戶數據')
const user = yield await loadUserData()
steps.value.push('3. 根據用戶角色加載不同數據')
if (user.role === 'admin') {
yield await loadAdminData()
} else {
yield await loadUserSpecificData(user.id)
}
steps.value.push('4. 完成初始化')
yield await finalizeInit()
}
// 執(zhí)行生成器
const generator = taskGenerator()
let result = await generator.next()
while (!result.done) {
console.log('步驟完成:', result.value)
result = await generator.next()
}
console.log('?? 所有步驟完成')
console.log('步驟記錄:', steps.value)
})
async function initApp() {
await delay(500)
return '應用初始化完成'
}
async function loadUserData() {
await delay(800)
return { id: 1, name: '張三', role: 'admin' }
}
async function loadAdminData() {
await delay(1000)
return '管理員數據加載完成'
}
async function loadUserSpecificData() {
await delay(600)
return '用戶數據加載完成'
}
async function finalizeInit() {
await delay(300)
return '初始化完成'
}
</script>五、錯誤處理與重試機制
1.帶重試的異步執(zhí)行
<script setup>
import { onMounted, ref } from 'vue'
const attempts = ref({})
onMounted(async () => {
console.log('?? 開始帶重試機制的執(zhí)行')
// 重試配置
const retryConfig = {
maxRetries: 3,
retryDelay: 1000,
onRetry: (taskName, attempt) => {
console.log(`?? ${taskName} 第 ${attempt} 次重試`)
}
}
// 執(zhí)行帶重試的任務
const result = await executeWithRetry(
fetchCriticalData,
['關鍵數據'],
retryConfig
)
console.log('?? 最終結果:', result)
})
// 重試執(zhí)行器
async function executeWithRetry(task, args, config) {
const { maxRetries, retryDelay, onRetry } = config
let lastError
for (let attempt = 0; attempt <= maxRetries; attempt++) {
try {
if (attempt > 0 && onRetry) {
onRetry(task.name, attempt)
}
attempts.value[task.name] = (attempts.value[task.name] || 0) + 1
return await task(...args)
} catch (error) {
lastError = error
console.log(`? ${task.name} 第 ${attempt} 次失敗:`, error.message)
if (attempt < maxRetries) {
await delay(retryDelay)
}
}
}
throw lastError
}
// 模擬可能失敗的任務
async function fetchCriticalData() {
const shouldFail = Math.random() < 0.7 // 70%失敗率
await delay(300)
if (shouldFail) {
throw new Error('網絡請求失敗')
}
return { data: '重要數據' }
}
</script>六、最佳實踐總結
同步執(zhí)行場景
// 適用于有依賴關系的任務
onMounted(async () => {
const data1 = await task1() // 必須先完成
const data2 = await task2(data1) // 依賴data1
const data3 = await task3(data2) // 依賴data2
})
并行執(zhí)行場景
// 適用于獨立任務，提高效率
onMounted(async () => {
const [result1, result2, result3] = await Promise.all([
task1(), // 獨立任務
task2(), // 獨立任務
task3() // 獨立任務
])
})
混合執(zhí)行場景
// 組合使用，先并行后順序
onMounted(async () => {
// 并行加載基礎數據
const [user, config] = await Promise.all([
fetchUser(),
fetchConfig()
])
// 順序處理依賴數據
const orders = await fetchOrders(user.id)
await processOrders(orders)
// 最后并行清理
await Promise.all([
sendAnalytics(),
updateCache()
])
})錯誤處理最佳實踐
onMounted(async () => {
try {
// 主任務
await mainTask()
} catch (error) {
console.error('主任務失敗:', error)
// 降級處理
await fallbackTask()
} finally {
// 清理資源
await cleanup()
}
})性能監(jiān)控
onMounted(async () => {
const startTime = performance.now()
// 執(zhí)行任務
await yourTasks()
const endTime = performance.now()
console.log(`?? 執(zhí)行耗時: ${Math.round(endTime - startTime)}ms`)
// 可以發(fā)送到監(jiān)控系統
if (endTime - startTime > 2000) {
console.warn('?? 執(zhí)行時間過長')
}
})?? 核心要點
- 使用
await控制順序執(zhí)行 - 使用
Promise.all()控制并行執(zhí)行 - 使用
Promise.allSettled()處理可能失敗的任務 - 合理組合順序和并行執(zhí)行優(yōu)化性能
- 實現適當的錯誤處理和重試機制
- 使用隊列控制并發(fā)數，避免資源耗盡
通過合理選擇執(zhí)行策略，可以顯著優(yōu)化組件初始化的性能和用戶體驗。
到此這篇關于Vue 3 onMounted 中控制同步與異步執(zhí)行策略的方案詳解的文章就介紹到這了,更多相關Vue 3 onMounted 同步與異步內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue一個動態(tài)添加background-image的實現
這篇文章主要介紹了Vue一個動態(tài)添加background-image的實現方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
vue element table中自定義一些input的驗證操作
這篇文章主要介紹了vue element table中自定義一些input的驗證操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
今天小編就為大家分享一篇使用vue-router切換頁面時實現設置過渡動畫。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
一文詳解如何在vue.config.js配置代碼混淆加密、壓縮
這篇文章主要介紹了如何在vue.config.js配置代碼混淆加密、壓縮的相關資料,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2025-05-05
這篇文章主要介紹了vue組件傳值的11種方式總結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue實現導出Excel表格文件提示“文件已損壞無法打開”的解決方法
xlsx用于讀取解析和寫入Excel文件的JavaScript庫,它提供了一系列的API處理Excel文件,使用該庫,可以將數據轉換Excel文件并下載到本地,適用于在前端直接生成Excel文件,這篇文章主要介紹了Vue實現導出Excel表格,提示文件已損壞,無法打開的解決方法,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue中props值的傳遞，在vue中父組件要正向的向子組件傳遞數據或者參數，子組件接收到后根據參數的不同來進行對應的渲染，這個正向的數據傳遞在vue組件中就是通過props來實現的，需要的朋友可以參考下2009-05-05
這篇文章主要介紹了詳解vue 組件的相關知識，文中講解非常細致，代碼供大家參考學習，感興趣的朋友可以了解下2020-06-06
這篇文章主要介紹了vue簡單封裝axios插件和接口的統一管理操作,結合具體實例形式分析了vue中axios插件安裝、配置及接口統一管理具體操作技巧,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了解決vue項目axios每次請求session不一致的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10