在Vue3开发中，直接对reactive数组重新赋值会导致响应式丢失。本文对比了使用ref、slice截取、length赋0以及splice四种清空数组的方法，详细解析了它们在ref和reactive不同场景下的表现，特别是watch触发次数和deep配置的必要性，帮助开发者选择最优方案。
1、前言
前几日工作中遭遇一难题，探讨在vue3环境下利用reactive构建的响应式数组应如何执行清空操作，通常我的做法如下：
let array = [1,2,3];
array = [];
然而，此种写法在reactive代理机制下存在瑕疵，例如：
let array = reactive([1,2,3]);
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的开发者应熟知，清空数组可如此书写：
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、总结
至此，关于JavaScript清空数组的四种方法介绍完毕，更多相关JavaScript资讯敬请查阅本站往期文章或继续浏览后续内容，期望日后能获大家持续支持！