Vue反应将一个对象的数组设置为另一个数组，并看到反应性变化

// 假设你有两个数组
let newArray = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];

// 假设this.items是响应式的数组
this.$set(this, 'items', newArray);

import { reactive } from 'vue';

const state = reactive({
  items: []
});

let newArray = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];

state.items = newArray; // Vue 3会自动检测到这个变化

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="updateItems">Update Items</button>
  </div>
</template>

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

export default {
  setup() {
    const state = reactive({
      items: []
    });

    function updateItems() {
      let newArray = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
      state.items = newArray; // 直接赋值即可触发响应性变化
    }

    return {
      items: state.items,
      updateItems
    };
  }
};
</script>