这篇“vue3中给数组赋值丢失响应式怎么解决”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue3中给数组赋值丢失响应式怎么解决”文章吧。
由于vue3使用proxy,对于对象和数组都不能直接整个赋值。
只有push或者根据索引遍历赋值才可以保留reactive数组的响应性
const arr = reactive([]);
const load = () => {
const res = [2, 3, 4, 5]; //假设请求接口返回的数据
// 方法1 失败,直接赋值丢失了响应性
// arr = res;
// 方法2 这样也是失败
// arr.concat(res);
// 方法3 可以,但是很麻烦
res.forEach(e => {
arr.push(e);
});
// 方法4 可以
// arr.length = 0 // 清空原数组
arr.push(...res)
}
或者
const state = reactive({
arr: []
});
...
state.arr = res
...
或者
const state = ref([]);
...
state.value= res
...
例子
<template>
<div class="content">
...
<Card title="content组件">
<button @click.prevent="add">ADD</button>
<button @click.prevent="pop">POP</button>
<button @click.prevent="changeList">changeList</button>
{{ list }}
<ProInj></ProInj>
</Card>
</div>
</template>
<script setup lang="ts">
import { reactive, markRaw, ref, defineAsyncComponent, inject, Ref } from 'vue'
...
let flag = ref(true)
let list = inject<Ref<number[]>>('list',ref(reactive<number[]>([])))
// let list = inject<Ref<number[]>>('list', ref<number[]>([1, 2, 3]))
const add = () => list.push(list!.length + 1)
const pop = () => list.pop()
const changeList = () => {
flag.value = !flag.value
if (flag.value) {
list.length = 0
list.push(...[9, 5, 4, 1])
}
else {
list.length = 0
list.push(...[6, 6, 6, 6, 6])
}
}
...
</script>
<style lang="less" scoped>
...
</style>
效果图:
reactive响应式数据赋值丢失响应式问题
const list = reactive({})
当你接收到接口数据,不要直接赋值 比如 list = data
这样会丢失响应式!
你可以这样做:
const list = reactive({
arr:[]
})
list.arr = data.arr
或者
将list声明为ref方式
const list = ref([])
list.value = data
这样也不会丢失响应式
原因:reactive声明的响应式对象被list代理 操作代理对象需要有代理对象的前缀,直接覆盖会丢失响应式
以上就是关于“vue3中给数组赋值丢失响应式怎么解决”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://blog.csdn.net/wgh4318/article/details/125654801