vue3中给数组赋值丢失响应式的解决

在Vue 3中，直接对一个数组进行赋值不会触发响应式更新。这是因为Vue 3使用了Proxy作为响应式系统的实现，而Proxy只会拦截对象的新增、修改和删除操作，不会拦截数组的直接赋值操作。所以我们需要使用Vue提供的一些工具来解决这个问题。

1. Vue提供的工具

Vue 3提供了几个工具来解决数组赋值丢失响应式的问题。

1.1. Array.prototype 中的一些方法

在Vue 3中，对数组使用以下方法仍然会触发响应式更新：

• push/unshift
• pop/shift
• splice
• sort
• reverse

这些方法都会在操作数组时触发响应式更新，因此我们可以使用它们来替代直接赋值。

1.2. Vue.set 和 Vue.delete

Vue 3提供了两个方法Vue.set和Vue.delete，它们可以用来在数组中添加/删除元素时触发响应式更新。例如：

const arr = ['a', 'b', 'c']
Vue.set(arr, 1, 'd') // arr变成['a', 'd', 'c']，会触发响应式更新
Vue.delete(arr, 2) // arr变成['a', 'd']，会触发响应式更新

Vue.set的第一个参数是要修改的数组，第二个参数是要修改的元素的下标，第三个参数是新的值。Vue.delete的第一个参数是要修改的数组，第二个参数是要删除的元素的下标。

2. 示例说明

2.1. 示例1：使用 Array.prototype 中的一些方法

<template>
  <div>
    <div v-for="(item, index) in list" :key="index">{{ item }}</div>
    <button @click="add">添加元素</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: ['a', 'b', 'c']
    }
  },
  methods: {
    add() {
      // 直接赋值不会触发响应式更新
      // this.list = ['a', 'b', 'c', 'd']

      // 使用Array.prototype.push
      this.list.push('d')
    }
  }
}
</script>

上面的示例中，当点击“添加元素”按钮时，我们可以使用push方法向数组中添加新的元素，并仍然保持响应式更新。

2.2. 示例2：使用 Vue.set 和 Vue.delete

<template>
  <div>
    <div v-for="(item, index) in list" :key="index">{{ item }}</div>
    <button @click="add">添加元素</button>
  </div>
</template>
<script>
import { reactive, toRefs, Vue } from 'vue'

export default {
  setup() {
    const state = reactive({
      list: ['a', 'b', 'c']
    })

    function add() {
      Vue.set(state.list, 3, 'd')
    }

    return {
      ...toRefs(state),
      add
    }
  }
}
</script>

上面的示例中使用了Vue.set方法来添加元素。需要注意的是，在Vue 3中使用Vue.set时需要将响应式数据对象包装成reactive函数返回的响应式对象，然后通过toRefs将响应式对象的属性转换为响应式引用。