Vue3如何清空Reactive定义的数组

let component_list = shallowRef([
  {unit: Head, name: 'Head', id: 1},
  {unit: TopClass, name: 'TopClass', id: 2},
])
component_list.value.length = []  // 清空

// 错误示例
<template>
  <div>{{ arr }}</div>
  <button @click="click">点击</button>
</template>
 
<script setup>
import { reactive } from 'vue'
let arr = reactive([1, 2, 3])
const click = () => {
  arr = []
  console.log(arr) // 这里打印的结果是正常的空数组
}
</script>

// 正确示例
<template>
  <div>{{ arr }}</div>
  <button @click="click">点击</button>
</template>
 
<script setup>
import { reactive } from 'vue'
let arr = reactive([1, 2, 3])
const click = () => {
  arr.length = 0 // 这里和vue2是正好相反，vue2直接将数组length设为0是无效的
  console.log(arr)
}
</script>

// 错误示例
<template>
  <div>{{ obj }}</div>
  <button @click="click">点击</button>
</template>
 
<script setup>
import { reactive } from 'vue'
let obj = reactive({a: 111, b: 222})
const click = () => {
  obj = {}
  console.log(obj) // 这里打印的结果是正常的空对象
}
</script>

// 错误示例
<template>
  <div>
    <div>{{ obj }}</div>
    <button @click="click">点击</button>
  </div>
</template>
 
<script setup>
import { reactive } from 'vue'
let arr = reactive({a: xxx, b: xxx })
const click = () => {
  for (let i in obj) {
    delete obj[i]
  }
  console.log(obj) // 这里打印的结果是正常的空数组
}
</script>