Nuxt3使用Composition API时响应性失效问题求助

问题根源 #

你用ref声明isVisible后，直接通过isVisible = !isVisible重新赋值，这会破坏ref的响应式包装——此时变量不再是响应式的ref对象，变成了普通布尔值，模板自然无法追踪到变化。

修正后的代码 #

<template lang="pug">
div {{ isVisible }} !-- 现在响应性正常，点击后值会切换 --!
</template>

<script setup>
const { locale, locales } = useI18n()
const switchLocalePath = useSwitchLocalePath()

const availableLocales = computed(() => {
  return locales.value.filter(i => i.code !== locale.value)
});

const isVisible = ref(false); // 用const更合适，我们不需要替换ref对象本身
const showDropdown = () => {
  console.log(isVisible.value); // 访问ref实际值要通过.value
  isVisible.value = !isVisible.value; // 修改ref值必须通过.value
}
</script>

额外说明 #

• 用ref声明的响应式变量，读取和修改都必须通过.value属性（模板中会自动解包，所以模板里直接写isVisible即可）
• 声明ref变量时建议用const，因为我们只需要修改它的.value，不需要替换整个ref对象

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