Vue3 Ref响应式失效及解决方法
本文探讨Vue3中使用ref时遇到的响应式失效问题，具体表现为更新ref数据后，表格复选框未更新。
问题描述
在Vue3项目中，使用ref定义变量，但更新数据后，页面UI（例如表格复选框）未响应更新。
原因分析
根本原因在于ref和reactive的差异：
-
ref用于包装基本数据类型（如数字、字符串、布尔值）。 -
reactive用于包装对象和数组。
当需要更新的对象或数组数据时，必须使用reactive来确保响应式。ref直接在模板中使用，而reactive需要在setup函数中调用并返回。ref通过.value属性访问值，reactive直接访问属性。
立即学习“前端免费学习笔记（深入）”；
解决方案
由于问题中数据为对象，因此应使用reactive进行包装：
import { reactive } from 'vue';
setup() {
const rowSelections = reactive({
// ... 原来的数据定义和初始化
});
// ... 其他代码
return { rowSelections };
}
通过将rowSelections用reactive包裹，确保其响应式，从而解决更新数据后UI不更新的问题。 记住在模板中使用rowSelections访问数据，无需.value。
