首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue 数组清空与重新赋值

vue3 数组清空与重新赋值的操作代码

2023-09-18 10:36:09 作者：开源字节

这篇文章主要介绍了vue3 数组清空与重新赋值的操作代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

vue3 数组清空与重新赋值

vue3里面，如果数组是用reactive()声明的，要清空数组得用list.length = 0,如果想要使用list =[],或者直接赋值类型list = [1,2,3,4,5],得把数组用ref([])来声明，然后用list.value = []来修改,然后如果是对象里面的数组，可以直接使用obj.list = []来清空，因为obj已经被响应式了.

<template>
  <div>
    {{list}}
    <button @click="add">增加</button>
    <button @click="clearAll">清空</button>
    {{newList}}
  </div>
</template>
<script>
import { ref, watch, toRefs,computed,reactive,onBeforeUpdate,onUpdated,onBeforeMount,onMounted,onBeforeUnmount,onUnmounted ,onRenderTracked,onRenderTriggered  } from 'vue'
export default {
  name: '',
  components: {
  },
  setup(){
    let list = ref([])
    function add(){
      list.value.push(123)
      state.newList.push(123)
    }
    let state = reactive({
      newList:[]
    })
    function clearAll(){
      list.value = [1,2,3,4,5]
      // list.length = 0
      state.newList = []
      console.log(list)
    } 
    return {
      list,
      add,
      clearAll,
      ...toRefs(state)
    }
  },
}
</script>

清空数组的几个方式介绍

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 :

    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. 总结

以上是我个人 工作中 的对于 清空数组 的总结，但是可以看到 splice 还是有点特殊的,会触发多次，不过为什么会产生这种差异还有待研究。

到此这篇关于vue3 数组清空与重新赋值的文章就介绍到这了,更多相关vue 数组清空与重新赋值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

vue3 数组清空与重新赋值的操作代码