【vue3|第17期】Vue3 中清空 Reactive 定义的数组的正确姿势

日期：2024年7月15日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

说在最前面：本文 vue3 的示例代码，在没有另外声名的情况下，均采用 <script setup> 组合式代码风格，风格统一，避免混乱，请各位新老食客放心食用哈 ^ _ ^

一、前言

在 Vue3 的响应式系统中，reactive API 允许我们创建响应式的对象或数组，这些对象或数组的任何变化都能被 Vue 的依赖追踪系统捕获，并自动触发视图更新。然而，在处理响应式数组时，特别是当需要清空数组时，我们需要注意一些特定的操作方式，以确保响应性不被破坏。本文将给出解决方案。

二、为什么不能直接赋值 [] 或重新声明？

在 Vue3 的响应式系统中，reactive 创建的响应式数组是通过代理（Proxy）实现的。这种代理能够拦截并响应数组上的各种操作，如 push、pop、splice 等，从而触发视图更新。然而，当你直接给一个响应式数组赋值一个新的数组（即 myArray = []）时，你实际上是在替换掉原有的响应式引用，而不是修改原数组的内容。由于新的数组（[]）并不是通过 reactive 创建的，因此它不具备响应性，Vue 无法追踪到它的变化。

同样地，如果通过 myArray = someOtherArray 的方式给数组赋一个全新的数组，也会遇到相同的问题：新的数组不是响应式的，Vue 无法追踪其变化。

三、两种数组清空的方案

我们通过一个例子来说明解决方案。
首先，我们定义一个 Reactive 的数组：

import { reactive } from 'vue';
const numList = reactive([1, 2, 3, 4, 5]);  

1、使用 myArray.length = 0 清空数组

myArray.length = 0 这种方式则是通过直接操作数组的 length 属性来清空数组的，这是一种标准的数组操作方法，且被 Vue3 的响应式系统所支持。当 length 被设置为 0 时，数组中的所有元素都会被移除，且这个操作是响应式的，能够触发依赖该数组的视图更新。

numList.length = 0;

2、使用数组的 splice 方法清空数组

numList.splice(0, numList.length);

这两种方式都会修改数组的长度，从而触发视图的更新。

四、完整示例

假设我们有一个 Vue3 组件，其中包含一个响应式数组 items，并在模板中通过 v-for 指令渲染这个数组的元素：

<template>  
  <div>  
    <ul>  
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>  
    </ul>  
    <button @click="clearItems">清空数组</button>  
  </div>  
</template>  
  
<script setup>  
import { reactive } from 'vue';  
  
const numList = reactive([1, 2, 3, 4, 5]);  

function clearItems() {  
  // 正确的方式：清空数组并保持响应性  
  numList.length = 0;  

  // 错误的方式，不会触发响应性更新  
  // numList = [];  

  // 同样错误的方式  
  // numList = someOtherArray;  
}  
  
</script>

在上述示例中，点击“清空数组”按钮将触发 clearItems 方法，该方法通过 numList.length = 0 清空数组，由于这是响应式的操作，所以视图会立即更新，不再显示任何列表项。

五、结语

在 Vue3 中，当需要清空一个 reactive 定义的数组时，强烈推荐使用 myArray.length = 0 的方式。这种方式既简单又直接，能够确保数组的响应性不被破坏，从而实现视图的自动更新。相比之下，直接给数组赋值新的数组或重新声明数组都不是好的做法，因为它们会破坏原有的响应性连接。

版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/140349201