耀极客论坛

 找回密码
 立即注册
查看: 611|回复: 0

vue清空数组的几个方式(小结)

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-7 00:53:34 | 显示全部楼层 |阅读模式
  本文主要介绍了vue清空数组的几个方式,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

1. 前言

  前两天在工作当中遇到一个问题,在vue3中使用reactive生成的响应式数组如何清空,当然我一般清空都是这么写:
  1.   let array = [1,2,3];
  2.   array = [];
复制代码
  不过这么用在reactive代理的方式中还是有点问题,比如这样:
  1.     let array = reactive([1,2,3]);
  2.     watch(()=>[...array],()=>{
  3.       console.log(array);
  4.     },)
  5.     array = reactive([]);
复制代码
  很显然,因为丢失了对原来响应式对象的引用,这样就直接失去了监听。


2. 清空数据的几种方式

  当然,作为一名十年代码经验常年摸鱼的我,立马就给出了几个解决方案。


2.1 使用ref()

  使用ref,这是最简便的方法:
  1.     const array = ref([1,2,3]);
  2.     watch(array,()=>{
  3.       console.log(array.value);
  4.     },)
  5.     array.value = [];
复制代码


2.2 使用slice

  slice顾名思义,就是对数组进行切片,然后返回一个新数组,感觉和go语言的切片有点类似。当然用过react的小伙伴应该经常用slice,清空一个数组只需要这样写:
  1.     const array = ref([1,2,3]);
  2.     watch(array,()=>{
  3.       console.log(array.value);
  4.     },)
  5.     array.value = array.value.slice(0,0);
复制代码

  不过需要注意要使用ref。


2.3 length赋值为0

  个人比较喜欢这种,直接将length赋值为0:
  1.     const array = ref([1,2,3]);
  2.     watch(array,()=>{
  3.       console.log(array.value);
  4.     },{
  5.       deep:true
  6.     })
  7.    array.value.length = 0;
复制代码
  而且,这种只会触发一次,但是需要注意watch要开启deep:

  不过,这种方式,使用reactive会更加方便,也不用开启deep:
  1.     const array = reactive([1,2,3]);
  2.     watch(()=>[...array],()=>{
  3.       console.log(array);
  4.     })
  5.     array.length = 0;
复制代码


2.4 使用splice

  副作用函数splice也是一种方案,这种情况同时也可以使用reactive:
  1.     const array = reactive([1,2,3]);
  2.     watch(()=>[...array],()=>{
  3.       console.log(array);
  4.     },)
  5.     array.splice(0,array.length)
复制代码
  不过要注意,watch会触发多次:

  当然也可以使用ref,但是注意这种情况下,需要开启deep:
  1.     const array = ref([1,2,3]);
  2.     watch(array,()=>{
  3.       console.log(array.value);
  4.     },{
  5.       deep:true
  6.     })
  7.     array.value.splice(0,array.value.length)
复制代码

  但是可以看到ref也和reactive一样,会触发多次。


3. 总结

  到此这篇关于vue清空数组的几个方式(小结)的文章就介绍到这了,更多相关vue清空数组内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 20:08 , Processed in 0.073851 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表