vue中的ref怎么将数组变为响应式

在 Vue 中，ref 可以将一个普通数据变为响应式数据，但是如果想将一个数组变为响应式，可以使用 Vue 提供的 reactive 函数。reactive 函数可以将一个对象或数组变为响应式数据。

下面是将一个数组变为响应式的示例代码：

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id" ref="items">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue';

export default {
  setup() {
    const list = reactive([
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Banana' },
      { id: 3, name: 'Orange' },
    ]);

    // 将 ref 数组变为响应式数组
    const items = toRefs(list);

    return {
      list,
      ...items,
    };
  },
};
</script>

在上面的示例代码中，我们使用 reactive 函数将一个数组变为响应式数据，然后使用 toRefs 函数将 ref 数组变为响应式数组，并将它们返回。这样就可以在模板中使用响应式数组了。