Vue 3 中 ref 导致非响应式更新的常见问题
在 Vue 3 中使用 ref 时，如果直接修改 ref 对象或数组的属性，页面不会自动更新。这是因为 ref 只能处理基本数据类型，而对象和数组需要使用 reactive 来确保响应式。
问题描述：
当使用 ref 定义一个对象或数组，并尝试修改其内部属性时，视图不会更新，例如表格选择框无法正常显示。
立即学习“前端免费学习笔记（深入）”；
问题根源：
ref 包装的对象或数组并非响应式。直接修改其属性不会触发 Vue 的响应式系统。
解决方案：
使用 reactive 函数创建响应式对象或数组：
<code class="javascript">import { reactive } from 'vue';
const rowSelections = reactive({}); // 创建一个空的响应式对象</code>
然后，在修改数据时，直接修改 rowSelections 对象的属性：
<code class="javascript">const rowSelectionChange = ({ rowSelection, id }) => {
rowSelections[id] = rowSelection; // 直接修改响应式对象
};</code>
通过这种方式，rowSelections 的变化会自动反映到视图中，从而解决表格选择框不更新的问题。 确保在组件中正确地使用 rowSelections 来渲染表格选择框。
通过将对象或数组用 reactive 包装，Vue 能够追踪其变化并更新视图，从而确保响应式行为。 记住，ref 适用于基本数据类型，而 reactive 适用于对象和数组。
