vue3中給數組賦值丟失響應式怎么解決

這篇“vue3中給數組賦值丟失響應式怎么解決”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“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響應式數據賦值丟失響應式問題

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中給數組賦值丟失響應式怎么解決”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。