Vue3中:class绑定忽略ref响应，仅初始加载生效求助

问题出在你模板里的v-once指令——这个指令会让元素只渲染一次，后续不管响应式数据怎么变化，都不会触发重新渲染。所以哪怕isDarkMode的值更新了，class绑定也不会生效。

修复步骤 #

1. 移除v-once指令 #

直接删掉<div>上的v-once，让元素能响应数据变化：

<template>
  <div :class="['homeBackground', isDarkMode ? 'backgroundDark' : '']"></div>
</template>

2. 优化响应式逻辑（可选但推荐） #

你可以用计算属性替代ref+watch的组合，更符合Vue的响应式最佳实践，代码也更简洁：

<script setup lang="ts">
import { computed } from "vue";
import { useColors } from "vuestic-ui";

const { currentPresetName } = useColors();

// 用计算属性直接推导dark模式状态
const isDarkMode = computed(() => currentPresetName.value === 'dark');
</script>

这样修改后，currentPresetName变化时，isDarkMode会自动更新，class绑定也会实时生效。

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