Home / Function/ customRef() — vue Function Reference

customRef() — vue Function Reference

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

Entity Profile

Dependency Diagram

graph TD
  ed9e592d_d374_e542_fb6c_6a607c8ec505["customRef()"]
  3e3c4a43_0494_5d27_e47e_6cc391330201["depend()"]
  ed9e592d_d374_e542_fb6c_6a607c8ec505 -->|calls| 3e3c4a43_0494_5d27_e47e_6cc391330201
  066df273_90c0_35dd_cd79_8e43c3f6c8ba["notify()"]
  ed9e592d_d374_e542_fb6c_6a607c8ec505 -->|calls| 066df273_90c0_35dd_cd79_8e43c3f6c8ba
  1c6c2c60_cb0c_a3fc_17fe_30271386e3b6["set()"]
  ed9e592d_d374_e542_fb6c_6a607c8ec505 -->|calls| 1c6c2c60_cb0c_a3fc_17fe_30271386e3b6
  style ed9e592d_d374_e542_fb6c_6a607c8ec505 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

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