Vue3:重新赋值来“清空”这个引用ref([])

在 Vue 3 中，如果你使用了 Composition API，特别是 ref 来创建一个响应式的引用（在这个例子中是一个数组），你可以通过简单地重新赋值来“清空”这个引用。但是，要注意的是，当你这样做时，你实际上是在替换整个引用，而不是仅仅清空数组的内容。这可能会导致依赖于该引用的任何计算属性或侦听器被重新评估，因为它们会检测到引用的变化（即新的内存地址）。

然而，如果你只是想要清空数组的内容而不是替换整个引用，你可以直接修改数组的内容。这里有几种方法可以做到这一点：

方法 1: 直接替换为新的空数组

import { ref } from 'vue';  
  
// 图片url  
const imageUrls = ref([]);  
  
// 清空该对象  
imageUrls.value = [];

方法 2: 使用数组的 .length 属性设置为 0

import { ref } from 'vue';  
  
// 图片url  
const imageUrls = ref([]);  
  
// 清空该对象  
imageUrls.value.length = 0;

这种方法不会替换引用，而是直接清空数组的内容，对于保持引用不变但清空其内容的情况很有用。

方法 3: 使用 .splice() 方法

import { ref } from 'vue';  
  
// 图片url  
const imageUrls = ref([]);  
  
// 清空该对象  
imageUrls.value.splice(0, imageUrls.value.length);

.splice() 方法会删除数组中指定位置的元素，并返回被删除的元素组成的数组。通过删除从索引 0 开始的全部元素（即整个数组的内容），也可以达到清空数组的目的。

哪种方法最好？

• 如果你希望清空数组并且不介意引用变化，第一种方法（直接替换为新的空数组）是最简单直接的。
• 如果你需要保持引用不变（例如，某些库或框架可能依赖于特定的引用），那么第二种或第三种方法（修改数组内容而不替换引用）可能更合适。

在大多数 Vue 3 的应用场景中，如果你只是简单地想要清空数组并且不关心引用变化，第一种方法（直接替换为新的空数组）是最常用的。