Several ways to clear arrays in Vue (summary)

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!

You may also be interested in:
  • Solution to the problem that vue objects cannot be updated in real time when adding or deleting members
  • Vue input v-model clear operation
  • How to clear an object in Vue

<<:  Solve nginx "504 Gateway Time-out" error

>>:  Vendor Prefix: Why do we need a browser engine prefix?

Recommend

Detailed explanation of the use of Vue mixin

Table of contents Use of Vue mixin Data access in...

TypeScript Mapping Type Details

Table of contents 1. Mapped Types 2. Mapping Modi...

Detailed explanation of CSS3 to achieve responsive accordion effect

I recently watched a video of a foreign guy using...

Summary of ten principles for optimizing basic statements in MySQL

Preface In the application of database, programme...

Practice of el-cascader cascade selector in elementui

Table of contents 1. Effect 2. Main code 1. Effec...

Complete steps to solve 403 forbidden in Nginx

The webpage displays 403 Forbidden Nginx (yum ins...

Solution to the problem that the image name is none after Docker load

Recently, I found that after using the docker loa...

CentOS6.8 Chinese/English environment switching tutorial diagram

1. Introduction People who are not used to Englis...

Three common uses of openlayers6 map overlay (popup window marker text)

Table of contents 1. Write in front 2. Overlay to...

How to uninstall Linux's native openjdk and install sun jdk

See: https://www.jb51.net/article/112612.htm Chec...

CSS cleverly uses gradients to achieve advanced background light animation

accomplish This effect is difficult to replicate ...

JS implements layout conversion in animation

When writing animations with JS, layout conversio...