快捷導(dǎo)航

vue3 數(shù)組清空與重新賦值的操作代碼

更新時(shí)間：2023年09月18日 10:36:09 作者：開源字節(jié)

這篇文章主要介紹了vue3 數(shù)組清空與重新賦值的操作代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

vue3 數(shù)組清空與重新賦值

vue3里面，如果數(shù)組是用reactive()聲明的，要清空數(shù)組得用list.length = 0,如果想要使用list =[],或者直接賦值類型list = [1,2,3,4,5],得把數(shù)組用ref([])來聲明，然后用list.value = []來修改,然后如果是對(duì)象里面的數(shù)組，可以直接使用obj.list = []來清空，因?yàn)閛bj已經(jīng)被響應(yīng)式了.

<template>
  <div>
    {{list}}
    <button @click="add">增加</button>
    <button @click="clearAll">清空</button>
    {{newList}}
  </div>
</template>
<script>
import { ref, watch, toRefs,computed,reactive,onBeforeUpdate,onUpdated,onBeforeMount,onMounted,onBeforeUnmount,onUnmounted ,onRenderTracked,onRenderTriggered  } from 'vue'
export default {
  name: '',
  components: {
  },
  setup(){
    let list = ref([])
    function add(){
      list.value.push(123)
      state.newList.push(123)
    }
    let state = reactive({
      newList:[]
    })
    function clearAll(){
      list.value = [1,2,3,4,5]
      // list.length = 0
      state.newList = []
      console.log(list)
    } 
    return {
      list,
      add,
      clearAll,
      ...toRefs(state)
    }
  },
}
</script>

清空數(shù)組的幾個(gè)方式介紹

1. 前言

前兩天在工作當(dāng)中遇到一個(gè)問題,在 vue3 中使用 reactive 生成的響應(yīng)式數(shù)組如何清空,當(dāng)然我一般清空都是這么寫:

  let array = [1,2,3];
  array = [];

不過這么用在 reactive 代理的方式中還是有點(diǎn)問題，比如這樣:

    let array = reactive([1,2,3]);
    watch(()=>[...array],()=>{
      console.log(array);
    },)
    array = reactive([]);

很顯然，因?yàn)閬G失了對(duì)原來 響應(yīng)式 對(duì)象的引用，這樣就直接失去了 監(jiān)聽 。

2. 清空數(shù)據(jù)的幾種方式

2.1 使用ref()

使用 ref ,這是最簡便的方法:

    const array = ref([1,2,3]);
    watch(array,()=>{
      console.log(array.value);
    },)
    array.value = [];

2.2 使用slice

slice 顧名思義，就是對(duì)數(shù)組進(jìn)行 切片 ，然后返回一個(gè)新 數(shù)組 ,感覺和 go 語言的 切片 有點(diǎn)類似。當(dāng)然用過 react 的小伙伴應(yīng)該經(jīng)常用 slice ，清空一個(gè)數(shù)組只需要這樣寫:

    const array = ref([1,2,3]);
    watch(array,()=>{
      console.log(array.value);
    },)
    array.value = array.value.slice(0,0);

不過需要注意要使用 ref 。

2.3 length賦值為0

個(gè)人比較喜歡這種,直接將 length 賦值為 0 ：

    const array = ref([1,2,3]);
    watch(array,()=>{
      console.log(array.value);
    },{
      deep:true
    })
   array.value.length = 0;

而且，這種只會(huì)觸發(fā)一次，但是需要注意 watch 要開啟 deep :

有的語言可能不支持。

不過，這種方式，使用 reactive 會(huì)更加方便，也不用開啟 deep :

    const array = reactive([1,2,3]);
    watch(()=>[...array],()=>{
      console.log(array);
    })
    array.length = 0;

2.4 使用splice

副作用 函數(shù) splice 也是一種方案，這種情況同時(shí)也可以使用 reactive :

    const array = reactive([1,2,3]);
    watch(()=>[...array],()=>{
      console.log(array);
    },)
    array.splice(0,array.length)

不過要注意， watch 會(huì)觸發(fā)多次:

當(dāng)然也可以使用 ref ,但是注意這種情況下，需要開啟 deep :

    const array = ref([1,2,3]);
    watch(array,()=>{
      console.log(array.value);
    },{
      deep:true
    })
    array.value.splice(0,array.value.length)

但是可以看到 ref 也和 reactive 一樣，會(huì)觸發(fā)多次。