如何在Vue.js 3 Composition API中使用mounted生命周期函数？

你遇到的问题核心是setup函数的执行时机早于DOM挂载，直接在setup里操作DOM会找不到元素。下面提供两种可靠的改写方式：

方案一：用onMounted钩子替代mounted #

Composition API中，onMounted的作用和Options API的mounted完全一致，会在DOM挂载完成后执行回调，这时候就能安全访问DOM元素了。

改写后的代码：

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  const bm = document.querySelector('#toggle');
  const overlay = document.querySelector('#overlay');

  bm.addEventListener('click', () => {  
    bm.classList.toggle("active");
    overlay.classList.toggle("open");
  });
});
</script>
<template>
  <header>
    <div class="button_container" id="toggle">
      <span class="top"></span>
      <span class="middle"></span>
      <span class="bottom"></span>
    </div>
    <div class="overlay" id="overlay">
      <nav class="overlay-menu">
        <ul>
          <li><a href="#home">Home</a></li>
          <!-- ... -->
        </ul>
      </nav>
    </div>      
  </header>    
</template>

方案二：使用模板Ref（推荐） #

Vue推荐用模板Ref替代原生querySelector，更符合Vue的组件化思路，也避免了依赖DOM id的耦合问题：

1. 在模板中给元素添加ref属性
2. 在setup中用ref()创建对应变量
3. 在onMounted中访问Ref的value属性操作DOM
4. 组件卸载时移除事件监听，避免内存泄漏

改写后的代码：

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

// 创建Ref变量对应模板元素
const toggleBtn = ref(null);
const overlay = ref(null);

// 定义点击事件处理函数
const handleToggleClick = () => {
  toggleBtn.value.classList.toggle("active");
  overlay.value.classList.toggle("open");
};

onMounted(() => {
  // DOM挂载完成后绑定事件
  toggleBtn.value.addEventListener('click', handleToggleClick);
});

onUnmounted(() => {
  // 组件卸载时移除事件监听
  toggleBtn.value.removeEventListener('click', handleToggleClick);
});
</script>
<template>
  <header>
    <!-- 给元素添加ref属性，和setup中的变量名对应 -->
    <div class="button_container" ref="toggleBtn">
      <span class="top"></span>
      <span class="middle"></span>
      <span class="bottom"></span>
    </div>
    <div class="overlay" ref="overlay">
      <nav class="overlay-menu">
        <ul>
          <li><a href="#home">Home</a></li>
          <!-- ... -->
        </ul>
      </nav>
    </div>      
  </header>    
</template>

为什么直接放setup不行？ #

setup函数的执行时机是组件实例创建后、DOM挂载前（对应Options API的beforeCreate和created阶段），这时候模板还没渲染成真实DOM，所以document.querySelector会返回null，自然无法操作DOM。

内容的提问来源于stack exchange，提问作者Max Pattern