vue清空数组的⼏个⽅式（⼩结）
⽬录
1.前⾔
2.清空数据的⼏种⽅式
2.1使⽤ref()
2.2使⽤slice
2.3length赋值为0
2.4使⽤splice
3.总结
1. 前⾔
前两天在⼯作当中遇到⼀个问题，在vue3中使⽤reactive⽣成的响应式数组如何清空，当然我⼀般清空都是这么写:
let array = [1,2,3];
array = [];
不过这么⽤在reactive代理的⽅式中还是有点问题，⽐如这样:
let array = reactive([1,2,3]);reactive 数组
watch(()=>[...array],()=>{
console.log(array);
},)
array = reactive([]);
很显然，因为丢失了对原来响应式对象的引⽤，这样就直接失去了监听。
2. 清空数据的⼏种⽅式
当然，作为⼀名⼗年代码经验常年摸鱼的我，⽴马就给出了⼏个解决⽅案。
2.1 使⽤ref()
使⽤ref，这是最简便的⽅法:
const array = ref([1,2,3]);
watch(array,()=>{
console.log(array.value);
},)
array.value = [];
2.2 使⽤slice
slice顾名思义，就是对数组进⾏切⽚，然后返回⼀个新数组，感觉和go语⾔的切⽚有点类似。当然⽤过react的⼩伙伴应该经常⽤slice，清空⼀个数组只需要这样写:
const array = ref([1,2,3]);
watch(array,()=>{
console.log(array.value);
},)
array.value = array.value.slice(0,0);
不过需要注意要使⽤ref。
2.3 length赋值为0
个⼈⽐较喜欢这种，直接将length赋值为0：
const array = ref([1,2,3]);
watch(array,()=>{
console.log(array.value);
},{
deep:true
})
array.value.length = 0;
⽽且，这种只会触发⼀次，但是需要注意watch要开启deep:
不过，这种⽅式，使⽤reactive会更加⽅便，也不⽤开启deep:
const array = reactive([1,2,3]);
watch(()=>[...array],()=>{
console.log(array);
})
array.length = 0;
2.4 使⽤splice
副作⽤函数splice也是⼀种⽅案，这种情况同时也可以使⽤reactive:
const array = reactive([1,2,3]);
watch(()=>[...array],()=>{
console.log(array);
},)
array.splice(0,array.length)
不过要注意，watch会触发多次:
当然也可以使⽤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⼀样，会触发多次。
3. 总结
到此这篇关于vue清空数组的⼏个⽅式(⼩结)的⽂章就介绍到这了，更多相关vue清空数组内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。