onMounted()

注册一个回调，以便在组件挂载后调用。

类型

function onMounted(callback: () => void): void

细节

组件在以下情况下被视为已挂载：

• 它的所有同步子组件都已挂载（不包括异步组件或<Suspense>树内的组件）。
• 它自己的 DOM 树已创建并插入到父容器中。请注意，如果应用程序的根容器也在文档内，它只保证组件的 DOM 树在文档内。

这个钩子，通常用于执行需要访问组件渲染的 DOM 的effect副作用，或者用于将与 DOM 相关的代码，限制在服务器渲染应用程序中的客户端。

在服务器端渲染期间不会调用此挂钩。

例子

通过模板引用访问元素：

<script setup>
import { ref, onMounted } from 'vue'

const el = ref()

onMounted(() => {
  el.value // <div>
})
</script>

<template>
  <div ref="el"></div>
</template>