Vue3——Chapter 5 (responsive API: isRef, unref, toRef, toRefs and other tool functions)


1. isRef()

  • Checks if a value is a ref.
  • Note that the return value is a type predicate, which means isRef can be used as a type guard
    insert image description here

Two, unref()

  • Returns the internal value if the argument is a ref, otherwise returns the argument itself.
  • This is a syntactic sugar for val = isRef(val) ? val.value : valcompute .
    insert image description here

3. toRef()

  • Based on a property on the reactive object, create a corresponding ref.
  • A ref thus created is kept in sync with its source property: changing the source property's value will update the ref's value, and vice versa.
    insert image description here
  • Note that this is different from:
    insert image description here
  • toRef() This function is useful when you want to pass a prop's ref to a composite function:
    insert image description here

4. toRefs()

  • Convert a reactive object to a normal object, each property of this normal object is a ref pointing to the corresponding property of the source object.
  • Each individual ref is created using toRef().
    insert image description here
  • toRefs is useful when returning reactive objects from composite functions.
  • Using it, consumer components can destructure/unwrap the returned object without losing responsiveness:
    insert image description here

5. isProxy()

  • Checks if an object is a proxy created by reactive(), readonly(), shallowReactive() or shallowReadonly().
    insert image description here

6. isReactive()

  • Checks if an object was a proxy created with reactive() or shallowReactive().
    insert image description here

7. isReadonly()

  • Checks if the value passed in is a read-only object. Properties of read-only objects can be changed, but they cannot be assigned directly by the passed object.
  • Proxies created via readonly() and shallowReadonly() are read-only because they are computed() refs without a set function.
    insert image description here

Guess you like

Origin blog.csdn.net/weixin_44733660/article/details/128629186