vue3 使用reactive创建对象通过异步更改值会出问题

290 阅读1分钟

使用refreactive都可以创建响应式对象,但它们的用法和行为略有不同。

ref是Vue 3中的一个函数,它接收一个参数并返回一个包装了该参数的响应式引用。通过ref创建的响应式对象,可以通过访问.value属性来获取和修改其值。这是因为ref将值封装在一个包装器中,以确保在访问和修改时能够触发响应式更新。

reactive是Vue 3中的另一个函数,它接收一个普通对象并返回一个响应式代理对象。通过reactive创建的响应式对象,可以直接访问和修改其属性,而无需使用.value。这是因为reactive会对对象的所有属性进行代理,以便在访问和修改时能够触发响应式更新。

在你的代码中,data对象是使用reactive创建的,所以你可以直接访问和修改其属性,如data.devEquipments。但是,由于异步操作的延迟,当你访问data.devEquipments时,它可能还没有被填充,因此会返回undefined

通过使用ref创建devEquipments,你可以确保在异步操作完成后,通过devEquipments.value来更新其值。这是因为ref提供了一个特殊的.value属性,它可以在访问和修改时触发响应式更新。

因此,通过将devEquipments创建为ref,并在异步操作完成后使用devEquipments.value来更新其值,可以确保在访问data.devEquipments时获取到正确的值。

改为ref创建 通过.value 赋值 没有问题了。。。。。。。。。。