Vue中onMounted修改变量后v-if未更新的问题

核心问题是：普通JavaScript变量无法被Vue3的响应式系统追踪，即便你在onMounted里修改了onceMounted的值，Vue也感知不到变化，自然不会更新视图。

问题代码回顾 #

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

let onceMounted = false

onMounted(() => {
  onceMounted = true
  console.log(onceMounted)
});
</script>

<template>
  <div>
    Hello
    <div v-if="onceMounted === true">
      World
    </div>
  </div>
</template>

原因说明 #

Vue3的响应式系统基于ES6 Proxy实现，只有通过ref或reactive声明的变量，才能被Vue添加响应式追踪依赖。普通的let变量只是简单的原始值，修改它不会触发任何响应式更新逻辑。

解决方案 #

用ref声明onceMounted变量，修改时通过.value访问（<script setup>的模板中使用时无需.value，Vue会自动解包）：

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

// 用ref声明响应式变量
const onceMounted = ref(false)

onMounted(() => {
  // 修改ref变量需要通过.value
  onceMounted.value = true
  console.log(onceMounted.value)
});
</script>

<template>
  <div>
    Hello
    <!-- 模板中直接使用变量名即可 -->
    <div v-if="onceMounted">
      World
    </div>
  </div>
</template>

修改后，当onceMounted.value从false变为true时，Vue会自动感知到变化，触发v-if对应的视图更新，"World"就能正常渲染了。

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