Vue

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 也被更改,反之亦然。

真的挺简单的,难道不是吗?