vue3 ref 或者reactive被赋值其他对象数据，用的是同一块内存，而不是深拷贝

<template>
  <div class='box'>
    {{ abcDemo?.a?.b?.c }}
    <button @click="changeAbc">Change ABC</button>

    <div>
      {{ abdDemo?.a?.b?.c }}
    </div>
  </div>
</template>
<script lang='ts' setup>
import { ref, reactive, computed, onMounted, nextTick, PropType } from 'vue';

const abc: any = {
  a: {
    b: {
      c: 1
    }
  }
}

const abcDemo = ref<any>({})
const abdDemo = ref<any>({})

abcDemo.value = abc;

function changeAbc() {
  abc.a.b.c = 1;

  // abcDemo 经打印，数值也会跟着变化，说明abc和abcDemo用的是同一块堆内存
  console.log(abcDemo.value, "slfjslkslkfjsdlfsj")

  abc.d = "5"


  console.log(abcDemo.value, "asdasdasdasdasdasdasdasdasdasd")

  //这样赋值，能够使页面更新数值
  abdDemo.value = abc;
}

/* 
  结论是：上面对象虽然用的是同一块内存数据，但是，原对象abc修改的时候不会触发abcDemo ref的响应式，说明vue3不是通过监听数据内存的改变
  来响应式，而是通过直接修改的时候劫持的方式来监听响应式
*/




</script>
<style lang='scss' scoped></style>

结论

ref 或者reactive被赋值其他对象数据，用的是同一块内存，而不是深拷贝