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. ConclusionThis 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:
|
<<: Solve nginx "504 Gateway Time-out" error
>>: Vendor Prefix: Why do we need a browser engine prefix?
When switching users in the docker container, it ...
Table of contents Use of Vue mixin Data access in...
This article uses examples to illustrate the usag...
Table of contents 1. Mapped Types 2. Mapping Modi...
I recently watched a video of a foreign guy using...
Preface In the application of database, programme...
Table of contents 1. Effect 2. Main code 1. Effec...
The webpage displays 403 Forbidden Nginx (yum ins...
The installation and configuration method of MySQ...
Recently, I found that after using the docker loa...
1. Introduction People who are not used to Englis...
Table of contents 1. Write in front 2. Overlay to...
See: https://www.jb51.net/article/112612.htm Chec...
accomplish This effect is difficult to replicate ...
When writing animations with JS, layout conversio...