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>