关于vue3 reactive解构丢失响应式的问题？

Question

const state = reactive({count: {value: 1}});
let {count} = state;
console.log(count === state.count);
count.value = 100 // 响应式的

const state = reactive({count: 1});
let {count} = state;
console.log(count === state.count);
count = 100 //丢失响应式了

丢失响应式的问题，总感觉是拷贝导致的，
对应对象就是浅拷贝(就没有丢失响应式)，对于基本类型就是深拷贝(就丢失响应式了)
大佬们是这个原因吗？还是什么其他原因？

Answer 1

你可以在改变后把两者的state都打印出来看，前者仍能保持响应式是因为解构出来的count是引用类型。count.value 变了后 state.count.value 也变了，count.value = 100等效于state.count.value = 100。后面那个不是引用类型，你改了count，state里面的数据没变。