解决vue3响应性丢失

环境
vue3
问题
reactive定义的对象响应性丢失

import {reactive} from 'vue'
const obj = reactive({
  test: 1
})
let {test} = obj
test = 2
console.log(test === obj.test) // false

此时的test跟obj中的test已经没有了关系，解构出来的test失去了响应性，改变test的值的时候obj.test的值还是原来的1
解决办法

import {reactive, toRef} from 'vue'
const obj = reactive({
  test: 1
})
let test = toRef(obj, 'test')
test.value = 2
console.log(test === obj.test) // true

通过toRef使得obj.test被代理然后赋值给test，不过后面test要使用的时候需要.value