Vue中清空数组有哪些高效方法？

本文共计701个文字，预计阅读时间需要3分钟。

目录

1.前言

2.清空数据的几种方式

2.1 使用ref() 2.2 使用slice() 2.3 length赋值为0 2.4 使用splice()

3.总结

1. 前言 2. 前两天在工作中发现一个问题，如何在vue3中使用reactive生成的响应式数组进行清空？

目录

• 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]); watch(()=>[...array],()=>{ console.log(array); },) array = reactive([]);

很显然，因为丢失了对原来响应式对象的引用，这样就直接失去了监听。