vue3 无法清空reactive

Question

最近刚刚开始用3,碰到reactive声明的响应数据,在方法里直接赋值{}空对象发现不能响应式的更新页面,值清空了,模板数据还在.只能遍历对象一项一项删吗?请问为什么回这样,这怎么解决呢

<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>

Answer 1

响应式只能响应对象的修改，不是变量的修改，这个变量就是一个指针，指向的是对象在内存中存储的地址【ps：在vue3里这里指向的实际是一个proxy实例对象】，那么你改变这个指针指向一个新数据是不可探测的，如果你的更改是整个对象，那么你要么再包一层，要么改用ref

Answer 2

1、请问为什么会这样
答：因为页面更新需要监测到reactive内的数据变化 而你是将obj置空 因此reactive并不起作用 所以页面并没发生变化

2、如何解决
答：你可以改用

let obj = reactive({value: {a: 111, b: 222}}) 

然后使用

obj.value = {}

其次你可以使用ref 内部实现只是包装了一层value