第八节:vue3 工具函数

前言

前面给大家讲解了Vue3创建响应数据的API, 包括ref, reactive, readonly等. 以及computed(计算属性), watch(监听)等常用API的使用.
本章主要来介绍Vue3提供一些工具函数. 通过这些工具函数可以快速的帮我们去判断数据, 以及通过响应式数据获取非响应数据.

1. isRef()

isRef()方法是Vue3提供的工具函数, 用于检查某个值是否为 ref 类型的数据。通过前面的学习相信大家已经了解了, 通过ref(), shallowRef(), computed()三个API返回的是ref数据.

接下来我们先看一下isRef()API 的具体类型. 通过示例理解isRef()函数的使用.

类型:

通过isRef类型, 可以看出以下几点信息:
● isRef 函数接受一个参数, 参数可以是任意数据类型
● isRef函数返回一个布尔值, 如果参数是ref类型的数据,则返回true, 否则返回 false

示例代码:

请注意，返回值是一个类型判定 (type predicate)，这意味着 isRef 可以被用作类型守卫
简单来说: 就是isRef() 函数返回一个布尔值. 判断参数是不是Ref类型的数据, 根据这个结果进行判断处理后续代码逻辑

当通过isRef 判断添加为true时, 会判定msg的类型是一个Ref<unknown>类型, 因此在使用.value属性时,ts不会报错. 否则就不通过.value获取数据

使用泛型

示例中没有使用泛型的isRef 判断条件中, 判定类型为Ref,泛型为原有类型, 当使用.value获取值时,就是unknown类型, 因此调用toUpperCase方法是报错
使用泛型后, 指定类型为string类型, 则判定的为Ref<string>类型, 使用.value获取值时,值的类型为string类型, 因此可以正常调用toUpperCase方法

自定义泛型不会影响判断结果

2. unref()

unref函数用于获取参数内部数据, 如果参数是ref数据(包括computed)，则返回内部值, 即.value数据，否则返回参数本身。

unref就是val = isRef(val) ? val.value : val计算的一个语法糖。

类型

示例



示例说明:
参数count 是ref 类型, 则unref函数返回count.value属性值, 值为0
参数state不是ref类型, 因此返回参数本身, 即Proxy {a:true}代理对象.

注意:
unref 方法泛型T的类型,

1. 如果参数为Ref<T>类型, T是value属性值的类型, 此类型也是unref方法返回值的类型
2. 如果参数是非Ref的对象类型, 这个对象只有一个属性值value, T也会获取到value属性值的类型,注意此种情况可能会类型校验报错
3. 除了以上情况, T则为参数类型
   

类型:
如果使用泛型, 参数则需要和指定的泛型类型保持一致
或者ref类型的value属性值类型与指定的泛型类型保持一致

str本身为string类型, str2的value值时string类型

3. toRef()

1. 基于响应式对象的一个 prop（属性）创建一个对应ref，且保持响应式
2. 创建的 ref 与其源属性保持同步

示例:

4. toRefs()

toRefs 是一种用于破坏响应式对象并将其所有属性转换为 ref 的实用方法

1. 将一个响应式对象转换为一个普通对象
2. 对象的每个属性(Prop)都是对应的ref,两者保持引用关系
3. 每个单独的 ref 都是使用 toRef() 创建的

类型:

示例:

5. toValue()

将值、refs 或 getters 规范化为值。这与 unref() 类似，不同的是此函数也会规范化 getter 函数。如果参数是一个 getter，它将会被调用并且返回它的返回值。

类型:

根据类型,可知, toValue函数接受的参数有三种形式:

1. 传入ref 数据. 返回ref 数据的.value 值
2. 传入一个函数, toValue 会自动调用这个函数, 返回函数的返回值
3. 除了以上两种情况外, 传入声明值, 返回什么值

示例:

6. isProxy()

检查一个对象是否是由 reactive()、readonly()、shallowReactive() 或 shallowReadonly() 创建的代理。

类型:

示例:

7. isReactive()

检查一个对象是否是由 reactive() 或 shallowReactive() 创建的代理。

类型:

示例:

8. isReadonly()

检查传入的值是否为只读对象。
通过 readonly() 和 shallowReadonly() 创建的代理都是只读的，因为他们是没有 set 函数的 computed() ref。

类型:

示例: