前言前两天在工作中遇到了一个问题。vue3中使用reactive生成的responsive数组如何清空当然，我通常是这样写的：letarray=[1,2,3];数组=[];重复代码，但是reactive代理的方式还是有一些问题，例如：letarray=reactive([1,2,3]);watch(()=>[...array],()=>{console.log(array);},)array=reactive([]);复制代码很明显，因为失去了对原reactive对象的引用，直接失去了监听。清除数据的几种方法当然，作为一个一直在摸鱼的十年代码经验的我，立马给出了几种解决方法。2.1使用ref()来使用ref，这是最简单的方法：constarray=ref([1,2,3]);watch(array,()=>{console.log(array.value);},)array.value=[];复制代码2.2使用sliceslice顾名思义就是对数组进行切片，然后返回一个新的数组，感觉有点类似于go语言的slice。当然用过react的朋友应该经常用到slice。清空一个数组，只需要这样写：constarray=ref([1,2,3]);watch(array,()=>{console.log(array.value);},)array.value=array.value.slice(0,0);复制代码但需要注意使用ref。2.3长度赋值0比较喜欢这个，直接把长度赋值0：constarray=ref([1,2,3]);watch(array,()=>{console.log(array.value);},{deep:true})array.value.length=0;复制代码而且这个只会触发一次，不过需要注意watch开启deep:不过这样的话，比较使用reactive很方便，不需要开启deep:constarray=reactive([1,2,3]);watch(()=>[...array],()=>{console.log(array);})array.length=0;copyCode2.4使用拼接副作用函数拼接也是一种解决方法。在这种情况下，您还可以使用reactive:constarray=reactive([1,2,3]);watch(()=>[...array],()=>{console.log(array);},)array.splice(0,array.length)复制代码但是要注意，watch会触发多次：当然你也可以使用ref，但是注意这种情况下需要打开deep:constarray=ref([1,2,3]);watch(array,()=>{console.log(array.value);},{deep:true})array.value.splice(0,array.value.length)来复制代码，但是可以看到ref和reactive一样，会被多次触发。总结以上是我个人工作中清空数组的总结，但是可以看出splice还是有点特殊，会多次触发，但是为什么会出现这种差异还有待研究。最后，如果您觉得这篇文章对您有点帮助，请点个赞。或者可以加入我的开发交流群：1025263163互相学习，我们会有专业的技术解答。如果您觉得这篇文章对您有用，请给我们的开源项目一个小星星：https://gitee。com/ZhongBangKe...非常感谢！
