Several ways to clear arrays in Vue (summary)

1. Introduction

I encountered a problem at work a few days ago. How to clear the responsive array generated by using reactive in vue3? Of course, I usually clear it like this:

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

However, this method is still a bit problematic when used in a reactive proxy, such as this:

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

Obviously, because the reference to the original responsive object is lost, the monitoring is directly lost.

2. Several ways to clear data

Of course, as someone who has ten years of coding experience and has been slacking off for years, I immediately came up with several solutions.

2.1 Using ref()

Using ref is the easiest way:

    const array = ref([1,2,3]);

    watch(array,()=>{
      console.log(array.value);
    },)

    array.value = [];

2.2 Using slices

As the name implies, slice slices an array and returns a new array, which is somewhat similar to the slice in the Go language. Of course, friends who have used react should often use slice. Clearing an array only needs to be written like this:

    const array = ref([1,2,3]);

    watch(array,()=>{
      console.log(array.value);
    },)

    array.value = array.value.slice(0,0);

But be careful to use ref.

2.3 length is assigned to 0

I personally prefer this method, which directly assigns length to 0:

    const array = ref([1,2,3]);

    watch(array,()=>{
      console.log(array.value);
    },{
      deep:true
    })

   array.value.length = 0;

Moreover, this will only be triggered once, but you need to pay attention to the watch to open deep:

However, in this way, it is more convenient to use reactive, and there is no need to enable deep:

    const array = reactive([1,2,3]);

    watch(()=>[...array],()=>{
      console.log(array);
    })

    array.length = 0;

2.4 Using splice

The side effect function splice is also a solution. In this case, you can also use reactive:

    const array = reactive([1,2,3]);

    watch(()=>[...array],()=>{
      console.log(array);
    },)

    array.splice(0,array.length)

Note, however, that watch will trigger multiple times:

Of course, you can also use ref, but note that in this case, you need to turn on deep:

    const array = ref([1,2,3]);

    watch(array,()=>{
      console.log(array.value);
    },{
      deep:true
    })

    array.value.splice(0,array.value.length)

But you can see that ref is also triggered multiple times like reactive.

3. Conclusion

This concludes this article about several ways to clear an array in Vue (summary). For more information about clearing an array in Vue, please search previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!