mini-vue

Appearance

ref ​

用法 ​

ref 接受基本数据类型或者对象，返回一个响应式的 ref 对象。与 reactive 类似地，在effect 中对 ref.value 做取值操作会触发依赖收集，对 ref.value 做赋值操作会依赖触发。

原理 ​

ref 会创建一个RefImpl实例并返回，该实例主要维护以下属性，__v_isRef 标识、_value 响应式数据（如果传入的是个对象，会对该对象进行响应式处理（Reactive），deps 表示该ref对象收集的依赖

get value 时会先 依赖收集 再返回值。set value 时，如果值有更新 会设置新值并依赖触发。

isRef ​

检查对象上是否有__v_isRef标识，并返回true或者false

unRef ​

如果传入的值是ref，返回ref.value 否则返回原值

toRef ​

用法 ​

基于响应式对象上的一个属性创建一个对应的ref 以此方法创建的ref会与源属性保持同步, 即改变源属性的值会更新ref的值, 改变ref的值会更新源属性的值

ts
const obj = reactive({ a: 1 })
const a = toRef(obj, 'a')
a.value = 2 // obj.a = 2

原理 ​

会创建一个ObjectRefImpl实例并返回, 对该对象上的value进行取值实际上会对源对象上被toRef包裹的属性进行取值, 可以理解成一个转发, 设置值的时候同理, 会对源对象上被toRef包裹的属性进行设置

toRefs ​

用法 ​

toRef每个属性创建一个的ref的用法还是过于麻烦, 所以就有了toRefs, toRefs相当于toRef的批量版, 他会将对象上的每一个属性创建一个ref并在返回一个包含这些ref的对象, 另一个好处是解决了响应式对象解构赋值的问题

ts
const obj = reactive({ a: 1, b: 2 })
const { a, b } = toRefs(obj)
a.value = 2 // obj.a = 2
b.value = 3 // obj.b = 3

原理 ​

toRefs会遍历对象上的每一个属性, 对每一个属性使用toRef创建一个ref并在返回一个包含这些ref的对象

proxyRefs ​

用法 ​

proxyRefs接受一个ref或者对象，返回一个代理对象，在取值时会自动脱ref 设置值的时候会自动设置ref

ts
const count = ref(1)

const proxyCount = proxyRefs(count)

console.log(proxyCount) // {value: 1}
proxyCount = 2
console.log(count.value) // {value: 2}

原理 ​

在get部分 直接对返回值做了unRef操作,这样拿到的就是ref.value

在set部分

  • 如果不是ref类型, 则直接替换成新的值
  • 如果是ref类型, 则设置ref.value