Vue+TypeScript中双标签切换时值变但视图不更新如何解决

在Vue 3 <script setup>语法中，直接通过let声明的基础类型（布尔、字符串、数字等）变量不具备响应性：

• 你在控制台观测到的true/false切换只是普通JS变量的数值变化，Vue响应式系统没有捕获到这个变更
• 响应式系统没触发视图更新，模板里的v-if判断始终拿的是初始渲染时的checked = false值，所以p标签内容不会变化

基础类型的响应式状态需要用Vue内置的refAPI声明，修改状态时操作返回对象的.value属性即可，模板中访问时Vue会自动解包，不需要手动写.value。

修正后的完整代码如下：

<script lang="ts">
export default defineComponent({
    inheritAttrs: false,
})
</script>

<script lang="ts" setup>
import { ref } from 'vue'
// 用ref包裹初始值生成响应式变量，推荐用const声明
const checked = ref(false)
function checkFunction() {
    // 修改ref值需要操作.value属性
    checked.value = !checked.value
}
</script>

<template>
    <div>
        <button @click="checkFunction">
            <div class="w-2/6 mx-auto my-auto flex justify-between">
                <div>
                    <h1 class="text-md font-medium text-black">Lorem, ipsum.</h1>
                    <p class="text-md font-medium text-gray-500">Lorem ipsum dolor sit amet consectetur.</p>
                </div>
                <!-- 布尔判断不需要冗余的===true/===false -->
                <p v-if="checked">This is true</p>
                <p v-else>This is false</p>
            </div>
        </button>
    </div>
</template>

• 声明ref变量优先用const：我们不会重新给checked变量本身赋值（不会写checked = xxx），只是修改它内部的value属性，用const符合编码规范，也能避免意外的变量重赋值。
• 模板里的布尔判断不需要写冗余的严格相等判断，v-if="checked"本身就会按布尔真值判断，搭配v-else就能覆盖两种分支，代码更简洁。

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