Vue.js onMounted()用法及代码示例

类型

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

细节

组件在以下情况下被视为已安装：

• 它的所有同步子组件都已安装(不包括异步组件或<Suspense> 树中的组件)。

• 它自己的 DOM 树已创建并插入到父容器中。请注意，如果应用程序的根容器也是 in-document，它只保证组件的 DOM 树是 in-document。

此钩子通常用于执行需要访问组件的渲染 DOM 的副作用，或用于将 DOM-related 代码限制为 server-rendered application 中的客户端。

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

示例

通过模板引用访问元素：

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

const el = ref()

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

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