vue3 响应式数据重新赋值后，reactive 丢失响应式，而 ref 不会

完整调试 代码

<template>
  <div>{{ refObj.b }}</div>
  <div>{{ reactiveObj.a }}</div>
  <div>
    <button @click="changeRef">修改Ref</button>
    <button @click="changeReactive">修改Reactive</button>
    <button @click="resetRef">重置Ref</button>
    <button @click="resetReactive">重置Reactive</button>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

let refObj = ref({
  b: 'ref-111111111'
})
let reactiveObj = reactive({
  a: 'reactive-111111111',
  c: 'ccccccccc'
})
function changeRef() {
  refObj.value = { b: 'ref-2222222' }
  console.log('changeRef', refObj, reactiveObj)
}
function changeReactive() {
  reactiveObj = { a: 'reactive-22222222' }
  console.log('changeReactive', refObj, reactiveObj)
}
function resetRef() {
  refObj.value = {
    b: 'ref-111111111'
  }
  console.log('resetRef', refObj, reactiveObj)
}
function resetReactive() {
  reactiveObj = { a: 'reactive-111111111' }
  console.log('resetReactive', refObj, reactiveObj)
}
console.log('base', refObj, reactiveObj)
</script>
<style scoped>
button {
  border: 1px solid #333;
  padding: 5px 10px;
  margin-right: 20px;
}
</style>

第一个问题：reactive响应式丢失，ref响应式没有丢失

1、点击 第二个按钮 修改Reactive的值 页面没有任何变化，控制台中可以看到使用reactive做响应式的数据 reactiveObj 丢失响应式

2、刷新页面后 点击 第一个按钮 修改Ref的值 页面数据发生变化，控制台中可以看到使用ref做响应式的数据 refObj 还是一个RefImpl(ref对象)，响应式还在。

注意：使用reactive 做相应式时，直接拿当前值做修改（ 如上案例中 reactiveObj），会丢失响应式；最好的方法就是多套一成 上面案例中就是修改 reactiveObj.a 的值 如不是直接修改 reactiveObj 的值