vue3 reactive的坑

最近使用vue3的过程中发现reactive有一些问题

1. 清空reactive定义的数组时必须将length设为0，直接赋值一个空数组是没有作用的，同理对象直接赋值一个空对象也没有作用，只能遍历对象一项一项删，这里说的没有作用是不能响应式的更新页面，如果打印一下是能看到确实被删除了，但是页面没有变化

   清空数组

   // 错误示例
   <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>

2. 同样的道理直接赋值也不行，数组只能用数组的某些方法，或者直接修改索引，修改索引跟vue2又是相反，vue2只修改索引项没有作用，对象直接使用点语法即可，直接赋一个对象没有作用
3. 这些问题其实只要使用ref就可以解决，但是人官方推荐使用reactive。。。。