Vue3——第五章(响应式 API:isRef、unref、toRef、toRefs等工具函数)


一、isRef()

  • 检查某个值是否为 ref。
  • 请注意,返回值是一个类型判定 (type predicate),这意味着 isRef 可以被用作类型守卫
    在这里插入图片描述

二、unref()

  • 如果参数是 ref,则返回内部值,否则返回参数本身。
  • 这是 val = isRef(val) ? val.value : val 计算的一个语法糖。
    在这里插入图片描述

三、toRef()

  • 基于响应式对象上的一个属性,创建一个对应的 ref。
  • 这样创建的 ref 与其源属性保持同步:改变源属性的值将更新 ref 的值,反之亦然。
    在这里插入图片描述
  • 请注意,这不同于:
    在这里插入图片描述
  • toRef() 这个函数在你想把一个 prop 的 ref 传递给一个组合式函数时会很有用:
    在这里插入图片描述

四、toRefs()

  • 将一个响应式对象转换为一个普通对象,这个普通对象的每个属性都是指向源对象相应属性的 ref。
  • 每个单独的 ref 都是使用 toRef() 创建的。
    在这里插入图片描述
  • 当从组合式函数中返回响应式对象时,toRefs 相当有用。
  • 使用它,消费者组件可以解构/展开返回的对象而不会失去响应性:
    在这里插入图片描述

五、isProxy()

  • 检查一个对象是否是由 reactive()、readonly()、shallowReactive() 或 shallowReadonly() 创建的代理。
    在这里插入图片描述

六、isReactive()

  • 检查一个对象是否是由 reactive() 或 shallowReactive() 创建的代理。
    在这里插入图片描述

七、isReadonly()

  • 检查传入的值是否为只读对象。只读对象的属性可以更改,但他们不能通过传入的对象直接赋值。
  • 通过 readonly() 和 shallowReadonly() 创建的代理都是只读的,因为他们是没有 set 函数的 computed() ref。
    在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44733660/article/details/128629186