1. 理解 Vue 3 的响应式系统

Vue.js 的核心能力之一是其响应式系统。当数据发生变化时，视图能够自动更新，这是 Vue 魔法的来源。然而，这种自动更新并非对所有数据都有效，它只作用于被 Vue 追踪的“响应式”数据。

在 Vue 3 的 Composition API 中，如果我们直接声明一个普通的 JavaScript 变量，例如 let show_heading = true;，这个变量是非响应式的。这意味着 Vue 无法追踪到它的变化。当这个变量的值被修改时，Vue 不会知道视图需要更新，因此依赖于这个变量的模板指令（如 v-if）将不会生效。

2. v-if 不生效的常见陷阱

考虑以下代码示例，它尝试通过点击按钮来切换一个标题的显示状态：

在这个示例中，show_heading 被声明为一个普通的 let 变量。尽管 toggleHeading 函数确实改变了 show_heading 的值（true ^ true 结果为 false，false ^ true 结果为 true，实现了布尔值的切换），但由于 show_heading 不是响应式数据，Vue 无法侦测到它的变化。因此，即使 show_heading 的值在逻辑上已经改变，模板中的 v-if="show_heading" 也不会重新评估，标题

的显示状态将保持不变。

立即学习“前端免费学习笔记（深入）”；

3. 解决方案：使用 ref 声明响应式状态

为了使数据具备响应性，Vue 3 提供了 ref 和 reactive 等函数。对于原始类型（如布尔值、字符串、数字）或单个值，我们通常使用 ref。

ref 函数接收一个内部值，并返回一个响应式且可变的 ref 对象。这个 ref 对象只有一个 .value 属性，用于指向内部值。当 .value 属性被修改时，Vue 就能追踪到这个变化，并触发依赖它的视图更新。

3.1 引入 ref

首先，需要在

Paraflow

AI产品设计智能体

下载

import { ref } from 'vue';

3.2 声明响应式变量

然后，使用 ref 来声明 show_heading 变量：

const show_heading = ref(true); // 使用 ref 声明响应式变量

这里 show_heading 不再是一个普通的布尔值，而是一个 ref 对象，其内部值是 true。

3.3 访问和修改 ref 的值

在

function toggleHeading() {
   show_heading.value = !show_heading.value; // 修改时必须使用 .value
}

在模板中，Vue 会自动对 ref 进行解包，所以你可以直接使用 show_heading 而无需 .value：

Hello world is working

4. 正确使用 ref 的完整示例

结合上述步骤，修正后的代码如下：

通过以上修改，show_heading 现在是一个响应式数据。每当 toggleHeading 函数被调用并修改 show_heading.value 时，Vue 都会侦测到这个变化，并通知 v-if 指令重新评估其条件，从而正确地切换标题的显示状态。

5. 注意事项与最佳实践

• 何时使用 ref： ref 主要用于声明单个响应式值，尤其适用于原始类型（string、number、boolean、symbol、null、undefined）。它也可以包裹对象，但对于复杂的响应式对象，reactive 可能是更合适的选择。
• .value 的使用： 牢记在
• 模板中的自动解包： 在 Vue 模板中，ref 会自动解包，所以你可以直接使用 ref 变量名，无需 .value。这是 Vue 提供的一个便利的语法糖。
• 调试工具： 强烈建议使用 Vue Devtools 浏览器扩展。它可以帮助你检查组件的响应式状态，直观地看到 ref 变量的值及其变化，从而更好地理解和调试 Vue 应用。
• reactive 与 ref 的选择： 对于对象和数组，reactive 函数可以创建响应式代理。但 reactive 只能用于对象类型，且不能直接替换整个 reactive 对象。ref 则更为灵活，可以包裹任何类型的值，并且可以完全替换其 .value。在

6. 总结

在 Vue 3 中，理解响应式系统是构建动态和交互式应用的关键。当 v-if 等指令未能按预期工作时，一个常见的原因是绑定的数据并非响应式。通过使用 ref 函数声明响应式状态，并记住在