开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第11天，点击查看活动详情

前言

vue中有些工具函数，可以帮助我们提高开发效率，今天我们就来看一下vue中的响应式API相关的工具函数。

isRef()

isRef:检查数据是否为ref对象，返回的值为布尔值，该布尔值是类型判断的结果。

    const name = 'tpsz';
    const refName = ref('tpsz');
    console.log(isRef(name), isRef(refName));//false true

为什么说返回的值是类型判断的结果，我们看下isRef()的ts类型：

   //Ref<T> ref对象的ts定义
   function isRef<T>(r: Ref<T> | unknown): r is Ref<T>//返回结果类型定义

函数结果的类型定义说明了布尔值的返回时候是类型判断的结果，并且根据该类型我们利用isRef()过滤掉类型为unknown的值。

   let age: unknown;
  console.log(isRef(age));//false

unref()

unref:对数据进行isRef检查，如果是ref对象返回ref对象的值，否则返回数据。

    const name = 'tpsz';
    const refName = ref('tpsz');
    console.log(unref(name), unref(refName));//tpsz tpsz

相当于一个三目运算，isRef(val) ? val.value : val

toRef()

toRef:将对象中的key变成响应式的，一般就是将reactive中的属性进行转换，转换后的值与reactive里的key值会保持‘连接’，同步更新。toRef接受三个参数：

转换的对象。
需要转换的key值。
默认的value值。

    const obj = reactive({
    name: 'tpsz',
    });
    const name = toRef(obj, 'name');
    name.value = 'name改变';
    console.log(name.value, obj.name); // name改变 name改变
    obj.name = 'obj.name改变';
    console.log(name.value, obj.name); // obj.name改变 obj.name改变

toRef效果与直接用对象的value值定义一个ref对象不一样。

   const obj = reactive({
     name: 'tpsz'
    });
    const name = ref(obj.name);
    name.value = 'name改变';
    console.log(name.value, obj.name); // name改变 tpsz

两个值之间不能同步更新。

toRefs()

toRefs:将reactive转换成普通的对象，对象里每个key对应的值value都是ref对象。对比toRef,toRefs相当于整体转换。toRefs可以与解构赋值结合使用，非常方便。

   const obj = reactive({
      name: 'tpsz'
    });
    const {name} = toRefs(obj)
    name.value = 'tpsz变了'
    console.log(name.value,obj.name)//tpsz变了 tpsz变了

toRefs只能转换源对象已经存在的枚举属性，并不能像创建，而toRef可以创建新的key值。

isReactive()

isReactive:检查数据是否是创建的代理，包含reactive()、shallowReactive()，与isRef()用法类似，也是返回一个布尔值。

   const obj = reactive({
      name: 'tpsz'
    });
    console.log(isReactive(obj))//true

isReadonly()

isReadonle:检查数据是否是创建的只读对象，跟上面一样返回布尔值。

   const obj = readonly({
      name: 'tpsz'
    });
    console.log(isReadonly(obj))//true

isProxy()

isProxy:检查数据是否是创建的代理，相当于isReactive()与isReadonly()检查条件的合集。

   const obj = readonly({
     name: 'tpsz'
   });
   console.log(isProxy(obj))//true

总结

以上就是vue中响应式的工具函数，对比toRef、toRefs比较常用的工具函数，我们要熟练掌握，理解其中的原理。

vue学习——响应式工具函数

前言