vue.delete删除数组,vue清空表格数据
本文主要介绍了vue清除数组的几种方式，通过实例代码详细介绍，具有一定的参考价值。感兴趣的朋友可以参考一下。
:
目录
1.介绍
2.清空数据的几种方法
2.1使用ref()
2.2使用切片
2.3长度被指定为0。
2.4使用拼接
3.摘要
1. 前言
前两天工作中遇到一个问题，如何清空vue3中使用reactive生成的响应式数组。当然，我一般都是空着的时候写这个：
设array=[1，2，3]；
array=[]；
然而，当它以反应剂的方式使用时，仍然存在一些问题，例如这样：
设array=reactive([1，2，3])；
手表(()=[.数组]，()={
console.log(数组)；
},)
array=reactive([])；
很明显，因为失去了对原始响应对象的引用，所以直接失去了监控。
2. 清空数据的几种方式
当然，作为一个常年钓鱼的10年代码经验，我立马给出了几个解决方案。
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
我个人比较喜欢这个，直接把长度赋值为0:
const array=ref([1，2，3])；
watch(array，()={
console . log(array . value)；
},{
深：真的
})
array . value . length=0；
而且，这只会被触发一次，但是你需要注意观察开深：
不过这样的话，用无功会更方便，也不需要开深：
const array=reactive([1，2，3])；
手表(()=[.数组]，()={
console.log(数组)；
})
array . length=0；
2.4 使用splice
副作用功能拼接也是一种方案，在这种情况下，您也可以使用反应式：
const array=reactive([1，2，3])；
手表(()=[.数组]，()={
console.log(数组)；
},)
数组.拼接(0，数组.长度)
不过，请注意，手表会触发多次：
当然，也可以使用ref，但是注意，在这种情况下，需要打开deep:
const array=ref([1，2，3])；
watch(array，()={
console . log(array . value)；
},{
深：真的
})
数组.值.拼接(0，数组.值.长度)
但是你可以看到，ref和reactive一样，会多次触发。
3. 总结
以上就是本文关于vue清空数组的几种方式(总结)。有关vue清空阵列的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。