vue3reactive对象属性为数组对象

可以直接使用Vue3中的`reactive`函数将数组对象变为响应式对象。

例如，有一个数组对象如下：

const arrObj = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

可以使用`reactive`将其变为响应式对象：

import { reactive } from 'vue'

const reactiveArrObj = reactive(arrObj)

这样就可以在组件中使用`reactiveArrObj`，当其中的属性发生变化时，组件会自动重新渲染。

<template>
  <ul>
    <li v-for="item in reactiveArrObj" :key="item.id">
      {{item.name}}
    </li>
  </ul>
</template>
<script>
import { reactive } from 'vue'

export default {
  setup() {
    const arrObj = [
      { id: 1, name: 'Alice' },
      { id: 2, name: 'Bob' },
      { id: 3, name: 'Charlie' },
    ];
    const reactiveArrObj = reactive(arrObj)

    return {
      reactiveArrObj
    }
  }
}
</script>