如何在 Vue 3 中正确使用响应式 API（ref）控制下拉菜单显隐-js教程-PHP中文网

如何在 Vue 3 中正确使用响应式 API（ref）控制下拉菜单显隐

本文详解 Vue 3 Composition API 中 ref 的核心用法，重点说明为何直接赋值会失效、必须通过 .value 修改，并提供可运行的下拉菜单完整示例。

本文详解 vue 3 composition api 中 `ref` 的核心用法，重点说明为何直接赋值会失效、必须通过 `.value` 修改，并提供可运行的下拉菜单完整示例。

在 Vue 3 中，ref() 创建的是一个响应式引用对象，而非原始值本身。它本质是一个带有 value 属性的 reactive wrapper（如 { value: false }），Vue 的响应式系统通过追踪该 value 属性的读写来触发更新。因此，绝不能对 ref 变量本身重新赋值（如 showDropDown = !showDropDown）——这会破坏响应式连接，导致模板无法感知变化。

正确的做法是：始终通过 .value 访问和修改其内部值。以下是修复后的完整逻辑：

import { ref } from 'vue'

// ✅ 正确：使用 ref() 声明响应式变量
const showDropDown = ref(false)
const imgSrcProfile = './src/assets/defaultUserIcon.webp'
const imgSrcLogo = './src/assets/DailyQuotes_Logo.png'

// ✅ 正确：通过 .value 修改值
function toggleDropDown() {
  showDropDown.value = !showDropDown.value
}

在模板中，v-if="showDropDown" 能直接工作，是因为 Vue 模板语法会自动解包 ref（即等价于 showDropDown.value），无需手动写 .value。但 JavaScript 逻辑中必须显式访问：

Vue

避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。

下载

<template><main><header><div class="logo">
        @@##@@
      </div>
      <div class="profile">
        <!-- ✅ 使用 @click（简写 v-on:click） -->
        @@##@@
        <!-- ✅ v-if 自动解包 ref，无需 .value -->
        <div id="dropDownMenu" v-if="showDropDown">
          <a>Profile</a>
          <a>Friends</a>
          <a>Settings</a>
          <a>Sign out</a>
        </div>
      </div>
    </header><mainpage></mainpage></main></template>

⚠️ 关键注意事项：

ref() 必须从 'vue' 显式导入，不可省略；
在 <script setup></script> 语法中，ref 声明的变量会自动暴露给模板，无需 return；
若需在组合式函数或 setup() 函数中使用 ref，请确保在 return 对象中暴露（或使用 <script setup></script> 简化语法）；
对于对象/数组等复杂类型，推荐使用 reactive()；但布尔、数字、字符串等基础类型，ref() 更直观且支持解包。