vue3使用reactive包裹数组正确赋值问题

当我们在Vue3中使用reactive包装一个对象时，如果该对象中存在数组，我们需要特别注意对数组进行正确的赋值。在Vue3中对数组的正确赋值方式相对于Vue2中有了一定的变化。

下面是一个使用Vue3中的reactive包装的对象的示例：

import { reactive } from 'vue' 

const state = reactive({
  name: 'Vue',
  description: 'The Progressive JavaScript Framework',
  frameworks: ['Vue', 'React']
})

现在我们向该对象的frameworks数组添加一个元素。我们可以使用以下方式：

state.frameworks.push('Angular')

但在Vue3中，reactive包装的数组具有更好的响应式能力。我们可以使用以下方式对数组进行修改：

state.frameworks = [...state.frameworks, 'Angular']

这个做法是在Vue3的官方文档中推荐的，它会创建一个新的数组并将新元素添加到其中，然后使用新的数组赋值给原来的state.frameworks属性。这样做的好处是会触发响应式更新。

下面再来看一个包含嵌套对象和数组的情况：

const state = reactive({
  name: 'Vue',
  description: 'The Progressive JavaScript Framework',
  frameworks: [
    { name: 'Vue', stars: 10000 },
    { name: 'React', stars: 20000 },
  ],
})

如果我们想要修改state.frameworks数组中第一个元素的stars属性值，代码如下：

state.frameworks[0].stars = 12000

但这种方式不能触发Vue3的响应式更新。为了正确地更新嵌套对象和数组，我们需要使用reactive对对象进行递归响应式包装。正确的写法如下：

import { reactive } from 'vue' 

const state = reactive({
  name: 'Vue',
  description: 'The Progressive JavaScript Framework',
  frameworks: reactive([
    reactive({ 
      name: 'Vue',
      stars: 10000
    }),
    reactive({ 
      name: 'React',
      stars: 20000
    })
  ]),
})

state.frameworks[0].stars = 12000

这样做会让Vue3正确地更新嵌套对象和数组。

总结来说，在使用Vue3中的reactive响应式包装数组和对象时，需注意以下两点：

• 对数组进行修改时，推荐使用新创建一个数组并将修改的结果添加到新数组的方式，以触发响应式更新；
• 对嵌套对象进行修改时，需要使用递归响应式包装的方式，以确保Vue3可以正确地更新嵌套对象和数组。