vue3 数组的合并方法更新视图

Vue3中使用合并数组的方法更新视图有两种方式：

1. 使用扩展运算符（spread operator）

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
    <button @click="addItem">Add Item</button>
  </div>
</template>

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

export default {
  setup() {
    const items = ref(['item1', 'item2']);

    const addItem = () => {
      items.value = [...items.value, 'item3'];
    };

    return {
      items,
      addItem,
    };
  },
};
</script>

在上面的例子中，我们使用了扩展运算符将原数组和新元素合并成一个新数组，并将其赋值给响应式变量items。这样，当添加新元素时，Vue3会自动更新视图。

2. 使用concat()方法

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
    <button @click="addItem">Add Item</button>
  </div>
</template>

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

export default {
  setup() {
    const items = ref(['item1', 'item2']);

    const addItem = () => {
      items.value = items.value.concat('item3');
    };

    return {
      items,
      addItem,
    };
  },
};
</script>

在这个例子中，我们使用了concat()方法将原数组和新元素合并成一个新数组，并将其赋值给响应式变量items。这样，当添加新元素时，Vue3会自动更新视图。

总之，使用合并数组的方法更新视图是Vue3中常用的一种方式，它可以让我们在动态添加或删除数组元素时，自动更新视图，提高了开发效率。