如何理解ref toRef和toRefs
是什么
ref
- 生成值类型的响应式数据
- 可用于模板和reactive
- 通过.value修改值
ref也可以像vue2中的ref那样使用
toRef
- 针对一个响应式对象（reactive）的prop
- 创建一个ref
- 两者保持引用关系
toRefs
- 将响应式对象（reactive封装）转换为普通对象
- 对象的每个prop都是对应的ref
- 两者保持引用关系
合成函数(可以理解为hooks)返回响应式对象
最佳使用方式
- 用reactive做对象的响应式，用ref做值类型的响应式
- setup中返回toRefs(state)，或者roRef(state, ‘xxx’)
- ref变量命名都用xxxRef
- 合成函数返回响应式对象时，使用toRefs
进阶，深入理解
为什么需要ref ？
- 返回值类型，会丢失响应式
- 如在setup、computed、合成函数，都有可能返回值类型
- Vue如果不定义ref，用户将自造ref，反而混乱
为什么需要.value？
- ref时一个对象(不丢失响应式)，value存储值
- 通过.value属性的get和set实现响应式
- 用于模板、reactive时，不需要.value，其他情况都需要
比如：
// 不使用.valuefunction computed1(getter) {let ref = 0;setTimeout(() => {ref = getter}, 1500);return ref;}// 使用.valuefunction computed2(getter) {let ref = {value: null};setTimeout(() => {ref.value = getter}, 1500);return ref;}let a = computed1(() => 100); // 0 -> 0let b = computed2(() => 100); // 0 -> 100
为什么需要toRef toRefs？
- 初衷：在不丢失响应式的情况下，把对象数据分解/扩散（解构）
- 前提：针对的是响应式对象（reactive封装的）非普通对象
- 注意：不创造响应式，而是延续响应式