对vue3/core源码ref.ts文件API的认识过程

对toRef()API的认识的过程:

最开始认识toRef()是从vue3源码中的ref.ts看见的,右侧GPT已经举了例子

然后根据例子,在控制台输出ref对象是什么样子的:

这就是ref对象了,我们根据对象中有没有__v_isRef来判断是不是一个ref对象,当对象存在且__v_isRef === true的时候他就判定为是一个ref对象然后返回true.

对shallowRef()API的认识的过程:

这是shallowRef的源码:

什么是shallowRef?

shallowRef用来创建一个浅层的ref对象,浅层ref只会对对象的第一层属性进行响应式处理,不会递归处理对象内部的属性.

对shallowRef()API的认识的过程:

对unRef()API的认识的过程:

 

对customRef()API的认识的过程:

源码:

文档解释:

防抖执行效果:

对toRefs()API的认识的过程:

源码:

toRefs()API的作用是:

// 创建一个Ref对象
const myRef = ref(1)

// 创建一个响应式对象
const myReactiveObj = reactive({ count: 3 })

// 修改Ref对象的值
myRef.value = 8

// 修改响应式对象的属性
myReactiveObj.count = 8

// 访问Ref对象的值
console.log(myRef.value) // 输出8

// 访问响应式对象的属性
console.log(myReactiveObj.count) // 输出8

将reactive所创造的响应式对象改为ref对象.

对toRefs()API的认识的过程:

源码:

GPT举例子:

const reactiveObj = reactive({ count: 3 })

// 使用toRef将响应式对象的属性转换为Ref对象
const countRef = toRef(reactiveObj, 'count')

// 修改Ref对象的值
countRef.value = 8

// 此时reactiveObj的count属性也会被更新为8
console.log(reactiveObj.count) // 输出8

toref()和torefs有什么区别呢?

toref用于将一个响应式对象的特定属性改为ref对象,

torefs用于将一个响应式对象的所有响应式属性啊ref对象,且返回一个包含所有转换后属性的对象