vue3中修改数组

 

     一，更改数组项

在Vue.js 2.x中，你可以使用Vue的响应式系统来修改数组。这里有几种方法可以实现：

1. 使用原生数组方法：Vue.js 包装了原生数组的方法，使其可以触发视图更新。例如，使用 push，pop，shift，unshift，splice，sort，reverse 等方法。

2. 使用Vue提供的响应式方法：Vue提供了如Vue.set或vm.$set方法来设置数组项或修改数组长度，以确保响应性。

// 示例1: 使用原生数组方法
new Vue({
  data: {
    items: ['a', 'b', 'c']
  },
  methods: {
    addItem() {
      this.items.push('d'); // 添加项到数组末尾
    }
  }
});

// 示例2: 使用Vue.set来修改数组项
new Vue({
  data: {
    items: ['a', 'b', 'c']
  },
  methods: {
    updateItem(index, newValue) {
      this.$set(this.items, index, newValue); // 修改数组指定索引的项
    }
  }
});

// 示例3: 使用Vue.set来设置数组长度
new Vue({
  data: {
    items: ['a', 'b', 'c']
  },
  methods: {
    growArray() {
      this.$set(this.items, 3, 'd'); // 通过设置新索引来增加数组长度
    }
  }
});

在Vue 3.x中，Vue.js采用了Proxy来替代之前的Object.defineProperty，使得响应式系统更加强大和高效。因此，在Vue 3.x中，你不再需要像Vue 2.x中那样使用Vue.set或vm.$set，数组的响应式已经不需要任何额外的工作。

<template>
  <div>
    <ul>
      <li v-for="(item, key) in items" :key="key">{{ item }}</li>
    </ul>
    <button @click="addItem">添加项</button>
  </div>
</template>

<script setup lang="ts">
const items = reactive(['a', 'b', 'c'])

const addItem = () => {
  items.push('d') // 添加项到数组末尾
}
</script>

<style scoped></style>

 在Vue 3.x中，使用reactive函数创建响应式对象时，数组内部的元素也是响应式的，所以直接修改数组（如使用push, pop, shift, unshift, splice, sort, reverse等方法）会自动更新视图。

 

二，替换整个数组

在Vue.js 3中，你可以使用Vue的响应式系统来为reactive数组赋值。这里有几种方法可以实现：

1. 使用ref创建一个响应式对象，该对象的属性可以是reactive数组。
2. 直接使用reactive函数来创建一个响应式对象，该对象中可以有reactive数组。

以下是使用ref和reactive为reactive数组赋值的例子：

// 使用ref
const arrayContainer = ref([]);
arrayContainer.value = reactive([1, 2, 3]);

// 使用reactive
const state = reactive({
  myArray: []
});
state.myArray = reactive([1, 2, 3]);

为了保持响应式，你应该总是通过.value属性访问ref的值，并且在为数组赋值时，直接操作reactive数组。如果你需要替换整个数组，请确保新数组也是reactive的。

三，如果const arrayContainer = reactive([]);要 给arrayContainer赋值，该如何保持响应式呢？

如果你已经使用 reactive 创建了一个响应式数组 arrayContainer，你可以直接通过赋值来更新数组的内容，而无需再次调用 reactive。由于 arrayContainer 本身已经是响应式的，你对其进行的任何修改（如添加、删除元素）都将是响应式的。

import { reactive } from 'vue';

// 创建一个响应式数组
const arrayContainer = reactive([]);

// 直接给数组赋值
arrayContainer.push(1); // 添加一个元素
arrayContainer.push(2, 3); // 添加多个元素

// 或者使用索引赋值
arrayContainer[0] = 10; // 修改第一个元素

注意：这样做会创建一个新的响应式数组，并替换原来的数组

<template>
  <div>
    <ul>
      <li v-for="(item, key) in arrayContainer" :key="key">{{ item }}</li>
    </ul>
    <button @click="addItem">添加项</button>
  </div>
</template>

<script setup lang="ts">
const items = reactive(['a', 'b', 'c'])
let arrayContainer = reactive([1, 2, 3])
const addItem = () => {
  arrayContainer = reactive([4, 5, 6])  //这样直接更改reactive数组页面并不会改变
}
</script>

<style scoped></style>

请注意，如果你直接替换 arrayContainer 的引用（如上面的例子所示），你将失去对原始响应式数组的引用，并且新的数组将是一个全新的响应式数组。如果你想要保持原来的响应式数组并添加新元素，应该这样做：

1，清空原数组并添加新元素

arrayContainer.splice(0, arrayContainer.length, ...[4, 5, 6]); 

 

2，你可以使用 splice 方法，它可以修改原数组并触发响应式更新。

此外，如果你想要保持 arrayContainer 的响应性，并替换数组的内容，你应该这样做：

/ 替换数组内容，同时保持响应性
arrayContainer.length = 0; // 清空数组
arrayContainer.push(...[4, 5, 6]); // 添加新元素

这样，arrayContainer 仍然保持响应性，并且其内容已经被替换。

3，使用ref定义一个数组

let arrayContainer = ref([1, 2, 3])
const addItem = () => {
  arrayContainer.value = [4, 5, 6]
}

页面会是响应式，并且数组中的值替换成了新的。