快捷導(dǎo)航

vue3中的reactive函數(shù)聲明數(shù)組方式

更新時間：2022年05月25日 09:05:42 作者：DanceDonkey

這篇文章主要介紹了vue3中的reactive函數(shù)聲明數(shù)組方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

reacitve函數(shù)如何聲明一個響應(yīng)式數(shù)組

如以下案例

<template>
? <div>
? ? ? <div v-for="item in arr" :key="item">?
? ? ? ? ? {{item}}
? ? ? </div>
? ? ? ? <button @click="change">change</button>
? </div>
</template>

<script>
? import { defineComponent, reactive,ref } from 'vue';
? export default defineComponent({
? ? setup(props,context) {
? ? ? let arr = reactive([])
? ? ? function change(){
? ? ? ? console.log("change...");
? ? ? ? let newArr = [1,2,3]
? ? ? ? arr = newArr
? ? ? }
? ? ??
? ? ? return{
? ? ? ? arr,
? ? ? ? change
? ? ? }
? ? },
? });
</script>
<style scope></style>

點擊change按鈕，發(fā)現(xiàn)并沒有什么變化，這是因為arr = newArr這行代碼讓arr失去了響應(yīng)式。

解決辦法

使用ref函數(shù)

?setup(props,context) {
? ? ? let arr = ref([])
? ? ? function change(){
? ? ? ? console.log("change...");
? ? ? ? let newArr = [1,2,3]
? ? ? ? arr.value = newArr
? ? ? }
? ? ??
? ? ? return{
? ? ? ? arr,
? ? ? ? change
? ? ? }
? ? },

使用數(shù)組的push方法

?setup(props,context) {
? ? ? let arr = reactive([])
? ? ? function change(){
? ? ? ? console.log("change...");
? ? ? ? let newArr = [1,2,3]
? ? ? ? arr.push(...newArr)
? ? ? }
? ? ??
? ? ? return{
? ? ? ? arr,
? ? ? ? change
? ? ? }
? ? },

創(chuàng)建一個響應(yīng)式對象，對象的屬性是數(shù)組

<template>
? <div>
? ? ? <div v-for="item in arr.list" :key="item">?
? ? ? ? ? {{item}}
? ? ? </div>
? ? ? ? <button @click="change">change</button>
? </div>
</template>

<script>
? import { defineComponent, reactive,ref } from 'vue';
? export default defineComponent({
? ? setup(props,context) {
? ? ? let arr = reactive({
? ? ? ? list:[]
? ? ? })
? ? ? function change(){
? ? ? ? console.log("change...");
? ? ? ? let newArr = [1,2,3]
? ? ? ? arr.list = newArr
? ? ? }
? ? ??
? ? ? return{
? ? ? ? arr,
? ? ? ? change
? ? ? }
? ? },
? });
</script>

使用reactive包裹數(shù)組賦值

需求

將接口請求到的列表數(shù)據(jù)賦值給響應(yīng)數(shù)據(jù)arr

代碼

const arr = reactive([]);
const load = () => {
? const res = [2, 3, 4, 5]; //假設(shè)請求接口返回的數(shù)據(jù)
? // 方法1 失敗，直接賦值丟失了響應(yīng)性
? // arr = res;
? // 方法2 這樣也是失敗
? // arr.concat(res);
? // 方法3 可以，但是很麻煩
? res.forEach(e => {
? ? arr.push(e);
? });
};

方法1：vue3 使用 proxy，對于對象和數(shù)組都不能直接整個賦值；

方法2：concat 不改變原數(shù)組

// 方法4
const state = reactive({
? arr: []
});
state.arr = [1, 2, 3]
// 方法5
const state = ref([])
state.value = [1, 2, 3]
// 方法6
const arr = reactive([])
arr.push(...[1, 2, 3])
// 亦或者
arr.length = 0 // 清空原數(shù)組
arr.push(...res) // 解構(gòu)然后push進去

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: