如何理解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封装的）非普通对象
• 注意：不创造响应式，而是延续响应式