Vue3使用script setup和组合式API时v-bind:class绑定不生效如何解决

核心原因 #

• 你此前的Svelte开发经验容易造成思维误区：Svelte对普通let声明的变量默认做自动响应式处理，但Vue 3组合式API需要显式用响应式API包裹变量才能触发视图更新。你代码中的isLoading是普通布尔变量，修改后Vue无法感知，自然不会同步更新模板的class绑定。
• 额外可优化点：当前handleSignIn的参数和外层声明的email、password同名，若外层变量是用于绑定表单v-model，传参属于冗余操作，若外层变量也未声明为响应式，还会导致登录逻辑拿不到最新的用户输入值。

修复方案 #

所有需要触发视图更新的基础类型变量统一用ref声明，脚本内修改时需要访问变量的.value属性，模板中会自动解包不需要额外调整写法。

修复后完整代码 #

脚本部分

<script setup lang="ts">
import { ref } from 'vue'
// 声明响应式变量，给定初始值
const email = ref('')
const password = ref('')
const isLoading = ref(false)

const handleSignIn = async () => {
  isLoading.value = true
  try {
    // 此处编写登录请求逻辑，通过.value获取变量值
    // 示例：await loginRequest(email.value, password.value)
  } finally {
    // 无论请求成功/失败，最终都重置loading状态，避免按钮一直处于加载态
    isLoading.value = false
  }
}
</script>

模板部分

<template>
<form @submit.prevent="handleSignIn">
...
<!-- 模板内ref自动解包，原有class绑定逻辑不需要修改 -->
<button type="submit" :class="{ 'is-loading': isLoading }">Log in</button>
...
</form>
</template>

内容的提问来源于stack exchange，提问作者Raf Rasenberg