您现在的位置是:主页 > Web前端技术 > Web前端技术

vue如何清空数组开发技术

IDCBT2021-12-30服务器技术人已围观

简介小编给大家分享一下vue如何清空数组,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 1. 前言

小编给大家分享一下vue如何清空数组,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

      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的小伙伴应该经常用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

      个人比较喜欢这种,直接将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:

      标签:

      很赞哦! ()

本栏推荐