Vue3的响应式数据处理方式
问题：data[0].tableId 是 undefined，但控制台可以打印出 data[0] 的值
原因: Vue 3 的响应式数据处理方式导致的。
Vue 3 使用了 Proxy 来实现响应式数据。当你访问一个响应式对象的属性时，Vue 会在底层进行拦截，并返回响应式的值。这意味着，当你访问 `data[0].TableId` 时，Vue 会返回响应式的 `TableId` 属性，而不是简单地返回原始的 `undefined` 值。
然而，当你在控制台中打印 `data[0]` 时，控制台显示的是对象的原始值，而不是 Vue 的响应式代理。因此，你可能会看到 `TableId` 属性的值是 `undefined`。
举个栗子:
<template>
<div>
<p>{{ data[0].TableId }}</p>
<p>{{ data[0] }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue';
const originalData = [
{ TableId: 1, Name: 'Table 1' },
{ TableId: 2, Name: 'Table 2' }
];
const data = ref(originalData); // Use ref for arrays
console.log(data.value[0].TableId); // Access the reactive value using .value
console.log(data.value[0]); // Access the reactive object
</script>