Vue3 Ref响应式失效及解决方法

本文探讨Vue3中使用ref时遇到的响应式失效问题，具体表现为更新ref数据后，表格复选框未更新。

问题描述

在Vue3项目中，使用ref定义变量，但更新数据后，页面UI（例如表格复选框）未响应更新。

原因分析

根本原因在于ref和reactive的差异：

• ref用于包装基本数据类型（如数字、字符串、布尔值）。
• reactive用于包装对象和数组。

当需要更新的对象或数组数据时，必须使用reactive来确保响应式。ref直接在模板中使用，而reactive需要在setup函数中调用并返回。ref通过.value属性访问值，reactive直接访问属性。

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

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

解决方案

由于问题中数据为对象，因此应使用reactive进行包装：

<code class="javascript">import { reactive } from 'vue';

setup() {
  const rowSelections = reactive({
    // ... 原来的数据定义和初始化
  });

  // ... 其他代码
  return { rowSelections };
}</code>

通过将rowSelections用reactive包裹，确保其响应式，从而解决更新数据后UI不更新的问题。 记住在模板中使用rowSelections访问数据，无需.value。