Vue 3 中在组件加载时自动执行函数的正确方式-js教程-PHP中文网

Vue 3 中在组件加载时自动执行函数的正确方式

在 Vue 3 的语法下，可通过 onMounted 生命周期钩子在组件挂载完成、DOM 渲染就绪后立即执行指定函数，无需重构代码或切换脚本模式。

在 vue 3 的 `<script setup>` 语法下，可通过 `onmounted` 生命周期钩子在组件挂载完成、dom 渲nder就绪后立即执行指定函数，无需重构代码或切换脚本模式。</script>

在 Vue 3 组合式 API 中，<script setup> 是推荐的、声明式且简洁的脚本编写方式。当需要在组件首次渲染并挂载到 DOM 后立即执行逻辑（例如初始化数据、触发 API 请求、启动第三方库实例等），应使用 onMounted 钩子——它确保此时 DOM 已可用，且组件已进入活跃状态。</script>

以下是最简、安全且符合最佳实践的写法：

<script setup>
import { onMounted } from 'vue'
import { someFunction } from './js/allowFunctions.js'

onMounted(() => {
  someFunction()
})
</script>

✅ 关键说明：

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

onMounted 是组合式 API 提供的标准生命周期钩子，专为“组件挂载完成”时机设计；
它与 <script setup> 完全兼容，无需改为选项式 API 或修改现有逻辑结构； </script>
函数调用发生在客户端（浏览器环境），服务端渲染（SSR）中不会执行，符合预期行为；
若 someFunction 是异步操作（如 async 函数或返回 Promise），建议显式处理以避免未捕获错误：

onMounted(async () => {
  try {
    await someFunction()
  } catch (error) {
    console.error('Failed to execute on mount:', error)
  }
})

⚠️ 注意事项：

不要使用 onBeforeMount 替代——此时 DOM 尚未生成，无法安全操作元素；
避免在 onMounted 外直接调用函数（如顶层 someFunction()），这会导致组件创建时立即执行，而非挂载后，且可能破坏响应性或 SSR 兼容性；
若需在组件卸载前清理资源（如定时器、事件监听器），请配对使用 onUnmounted。

综上，onMounted 是 <script setup> 下实现“页面/组件加载即执行”的标准、可靠且零侵入的解决方案。</script>