vue Architecture Docs
Home / Function/ customRef() — vue Function Reference

customRef() — vue Function Reference

Architecture documentation for the customRef() function in ref.ts from the vue codebase.

Function typescript CoreRuntime VNodePatch calls 3

Entity Profile

Dependency Diagram

graph TD
  61d0e216_bbe6_fde1_d695_6f4a6a923f3b["customRef()"]
  f4977573_27eb_c4dc_cd60_7cd1351c05f0["depend()"]
  61d0e216_bbe6_fde1_d695_6f4a6a923f3b -->|calls| f4977573_27eb_c4dc_cd60_7cd1351c05f0
  a736e9c3_51fa_4ff8_f139_f83b45794e0f["notify()"]
  61d0e216_bbe6_fde1_d695_6f4a6a923f3b -->|calls| a736e9c3_51fa_4ff8_f139_f83b45794e0f
  f3ed2d67_a40e_608d_185e_32b185fb8046["set()"]
  61d0e216_bbe6_fde1_d695_6f4a6a923f3b -->|calls| f3ed2d67_a40e_608d_185e_32b185fb8046
  style 61d0e216_bbe6_fde1_d695_6f4a6a923f3b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/v3/reactivity/ref.ts lines 148–184

export function customRef<T>(factory: CustomRefFactory<T>): Ref<T> {
  const dep = new Dep()
  const { get, set } = factory(
    () => {
      if (__DEV__) {
        dep.depend({
          target: ref,
          type: TrackOpTypes.GET,
          key: 'value'
        })
      } else {
        dep.depend()
      }
    },
    () => {
      if (__DEV__) {
        dep.notify({
          target: ref,
          type: TriggerOpTypes.SET,
          key: 'value'
        })
      } else {
        dep.notify()
      }
    }
  )
  const ref = {
    get value() {
      return get()
    },
    set value(newVal) {
      set(newVal)
    }
  } as any
  def(ref, RefFlag, true)
  return ref
}

Domain

Subdomains

Calls

Source

Frequently Asked Questions

What does customRef() do?
customRef() is a function in the vue codebase.
What does customRef() call?
customRef() calls 3 function(s): depend, notify, set.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free