Vue 3 中 ref 导致非响应式更新的常见问题

在 Vue 3 中使用 ref 时，如果直接修改 ref 对象或数组的属性，页面不会自动更新。这是因为 ref 只能处理基本数据类型，而对象和数组需要使用 reactive 来确保响应式。

问题描述：

当使用 ref 定义一个对象或数组，并尝试修改其内部属性时，视图不会更新，例如表格选择框无法正常显示。

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

问题根源：

vue-admin-change-reviewer

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

下载

ref 包装的对象或数组并非响应式。直接修改其属性不会触发 Vue 的响应式系统。

解决方案：

使用 reactive 函数创建响应式对象或数组：

import { reactive } from 'vue';

const rowSelections = reactive({}); // 创建一个空的响应式对象

然后，在修改数据时，直接修改 rowSelections 对象的属性：

const rowSelectionChange = ({ rowSelection, id }) => {
  rowSelections[id] = rowSelection; // 直接修改响应式对象
};

通过这种方式，rowSelections 的变化会自动反映到视图中，从而解决表格选择框不更新的问题。 确保在组件中正确地使用 rowSelections 来渲染表格选择框。

通过将对象或数组用 reactive 包装，Vue 能够追踪其变化并更新视图，从而确保响应式行为。 记住，ref 适用于基本数据类型，而 reactive 适用于对象和数组。