Vue3 toRefs转换详解

把一个reactive对象转换为一个普通对象，并且该普通对象上的每个属性指向的是 ref对象，这些 ref 对象由原对象相应的属性值创建。

不理解？好吧，代码才是最好的解释。

const state = reactive({
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)
/*
stateAsRefs 为一个普通对象:
{
  foo: Ref<1>,
  bar: Ref<2>
}

*/

state.foo++
console.log(stateAsRefs.foo.value) // 2

stateAsRefs.foo.value++
console.log(state.foo) // 3

例子中的state 对象和 stateAsRefs 的对象的属性被相互链接在一起了，state 对象里的属性被更改，stateAsRefs 也被更改，反之亦然。

真的挺简单的，难道不是吗？