toRef和toRefs

ref和refs

toRef的用法

规范化签名：将一个普通对象变为非响应式ref ，通过.value访问

1
2
3
const obj = { count: 0 };
const countRef = toRef(obj);
console.log(countRef.value); // 输出：{ count: 0 }

对象属性签名：将reactive中具体某个对象双向 ref，会与源属性同步

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const state = reactive({
  foo: 1,
  bar: 2
})

// 双向 ref，会与源属性同步
const fooRef = toRef(state, 'foo')

// 更改该 ref 会更新源属性
fooRef.value++
console.log(state.foo) // 2

// 更改源属性也会更新该 ref
state.foo++
console.log(fooRef.value) //3

toRefs用法：

1
2
3
toRefs（<reactive Obj>）

toRefs 在调用时只会为源对象上可以枚举的属性创建 ref
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const state = reactive({
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)
/*
stateAsRefs 的类型：{
  foo: Ref<number>,
  bar: Ref<number>
}
*/

// 这个 ref 和源属性已经“链接上了”
state.foo++
console.log(stateAsRefs.foo.value) // 2

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