Vue 3.0 中的 setup 和 mounted 事件详解

Vue 3.0 中，setup 和 mounted 是两个重要的生命周期钩子，各自的触发时机和使用场景不同。通过了解它们的区别和用途，可以更有效地管理组件的状态和 DOM 操作。

setup 函数 setup 是 Vue 3.0 Composition API 的核心函数之一，在组件实例创建之初就会被调用，用于初始化组件的状态、依赖注入、定义计算属性和方法等。此时，组件尚未挂载到 DOM，因此无法直接操作 DOM 元素。

在 setup 中，常见的操作包括使用 ref 和 reactive 定义响应式状态，或使用 onMounted 等 Composition API 钩子来处理挂载后的逻辑。例如：

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

const message = ref('Hello from setup!')

onMounted(() => {
  console.log('组件已挂载')
})
</script>

<template>
  <div>{{ message }}</div>
</template>

以上代码中，setup 函数用于初始化 message 状态，并使用 onMounted 来监听组件挂载后执行的逻辑。这样，setup 中便可以既定义初始化状态，也可以通过生命周期钩子延后执行挂载相关操作。

mounted 钩子 mounted 钩子在组件挂载到 DOM 后自动调用，此时可以安全地访问和操作 DOM 元素。mounted 钩子更适合处理与页面显示相关的操作，适用于 Vue 选项式 API。例如：

<script>
export default {
  data() {
    return {
      message: 'Hello from mounted!'
    }
  },
  mounted() {
    console.log('组件已挂载')
  }
}
</script>

<template>
  <div>{{ message }}</div>
</template>

在这个示例中，mounted 钩子用于在组件挂载后执行的逻辑，并使用 data 定义组件的响应式状态 message。因此，通过 mounted 可以实现页面渲染后直接执行的 DOM 操作。

总结 setup 和 mounted 都是由组件实例触发，但在不同的生命周期阶段执行。setup 用于初始化组件的状态和逻辑，mounted 适用于处理 DOM 相关的操作。理解这两者的区别和用法，能够更好地控制 Vue 组件的行为和性能。