Appearance
Ref
Ref使用代码示例
Ref: 接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。
toRef
- 针对一个响应式对象 （reactive 封装）的prop
- 创建一个 Ref, 具有响应式
- 两者保持引用关系
toRef使用代码示例
toRef: 基于响应式对象上的一个属性，创建一个对应的 ref。这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然。
toRef 如果用于普通对象，产出的结果不具有响应式
toRefs
- 将响应式对象(reactive封装)转换为一个普通对象
- 对象的每个prop都对应的ref
- 两者保持引用关系
toRefs使用代码示例
toRefs: 将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。
应用场景： 组合式函数返回响应式对象时， toRefs相当有用
js
function useFeatureX() {
const state = reactive({
foo: 1,
bar: 2
})
// ...基于状态的操作逻辑
// 在返回时都转为 ref
return toRefs(state)
}
// 可以解构而不会失去响应性
const { foo, bar } = useFeatureX()
最佳使用方式参考
- 用 reactive 做对象的响应式， 用ref做值类型的响应式（ref也可以作为对象的响应式）
- 推荐 ref 的变量命名都用 xxxRef
- 合成函数返回响应式对象时，使用 toRefs
进阶，深入理解原理
reactive
源码地址:packages\reactivity\src\reactive 使用 reactive 的时候，会调用一个 createReactiveObject 的方法,将对象中的属性存储到相应式的数据结构中，返回一个Proxy对象
Ref
源码地址: packages\reactivity\src\ref 其实是创建 ref 的时候， 实例化了一个 class -> new RefImpl(rawValue, shallow) ，然后通过自定义的 get set来进行依赖收集和依赖更新、 ref内部对对象的响应式处理，基于 reactive 进行的。