Why can an ordinary object respond to change?

[cnsource]

Reproduction

https://stackblitz.com/edit/github-cjfmgk-bpwdd4?file=src/App.vue

Steps to reproduce the bug

B is a normal variable, but it can respond to changes

Expected behavior

B is added to the array and will no longer have a response

Actual behavior

B is added to the array and still has a response

Additional information

You can view the console log

[posva]

Because it's a Ref, you need to create a copy of the object with {...object.value}

[cnsource]

thank you

[cnsource]

A and B look the same when printed on the console. B uses toRaw to get the original data. I don't know why B is still a responsive variable after toRaw

I think that B gets the reference of the original data and stores it in the array, but the student response variable will modify the original data, which will cause B to be changed. Am I right?

This is my way to prove the above conjecture

<script setup lang="ts">
import {ref, toRaw} from "vue";

let A = {a:10};
let B = ref(A);
let C = toRaw(B.value)
function changeData(){
  B.value.a += 20
  console.log(A,B,C)
}
</script>

<template>
  <hr/>
  <button @click="changeData">changeData</button>
  <br>
  A:{{ A }}<br>
  B:{{ C }}<br>
  C:{{ B }}<br>
</template>

[posva]

Even if you use toRaw, you are still modifying the same underlying object