在vue 3的composition api中，初学者常会遇到一个问题：即使数据看似被修改了，模板中的v-if指令却未能按预期更新dom。这通常是由于对vue的响应式系统理解不足导致的。当我们在<script setup>中直接使用let声明一个变量，例如let show_heading = true;时，这个变量仅仅是一个普通的javascript变量，vue无法追踪它的变化。因此，即使我们在某个函数中修改了show_heading的值，vue也无法得知这一变化，也就不会触发组件的重新渲染，导致v-if指令无法响应。
要解决这个问题，我们需要使用Vue提供的响应式API来声明数据，其中最常用且适用于原始值（如布尔值、字符串、数字）的是ref函数。ref函数可以将一个原始值包装成一个响应式对象，使其变化能够被Vue追踪。
以下是使用ref函数正确实现标题切换功能的代码示例：
<script setup>
import { ref } from 'vue'; // 引入ref函数
// 使用ref声明响应式变量
const show_heading = ref(true);
// 切换标题显示状态的函数
function toggleHeading() {
// 修改ref变量的值时，必须通过.value属性访问和修改
show_heading.value = !show_heading.value;
}
</script>
<template>
<h1 v-if="show_heading">Hello world is working</h1>
<button class="btn btn-primary" @click="toggleHeading">Toggle heading</button>
</template>
<style scoped>
/* 样式内容 */
</style>在上述代码中，我们首先从vue包中导入了ref函数。然后，将show_heading变量声明为const show_heading = ref(true);。这里的show_heading不再是简单的布尔值，而是一个Ref对象，其内部包含着我们期望的布尔值。当我们需要访问或修改这个响应式变量的实际值时，必须通过它的.value属性。例如，在toggleHeading函数中，我们使用show_heading.value = !show_heading.value;来切换其布尔值。这样，当show_heading.value发生变化时，Vue的响应式系统就能检测到这一变化，并自动更新依赖于它的模板部分，从而使v-if指令正确地控制<h1>元素的显示与隐藏。
注意事项：
立即学习“前端免费学习笔记（深入）”；
- 引入ref： 务必从vue包中显式导入ref函数。
- 使用.value： 在<script setup>内部访问或修改由ref创建的响应式变量时，总是需要通过.value属性。但在模板中，Vue会自动解包ref，因此可以直接使用show_heading而无需.value。
- 选择ref或reactive： ref主要用于处理原始值（string, number, boolean, symbol, bigint）或单个对象。如果需要声明一个复杂的响应式对象，并希望其所有属性都是响应式的，那么reactive函数可能是更合适的选择。
- 不可变性与可变性： ref返回的是一个可变的引用对象，其.value属性可以被重新赋值。
通过正确使用ref函数并理解其.value属性的工作原理，我们可以确保Vue 3组件中的数据能够被正确地追踪和响应，从而实现各种动态的UI交互效果，如条件渲染、列表渲染等。掌握这一核心概念是编写高效、可维护的Vue 3应用的关键一步。
