customRef() — vue Function Reference

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

Function typescript VueCore GlobalAPI

Entity Profile

VueCore→ GlobalAPI→ customRef() — vue Function Reference

Dependency Diagram

graph TD
  16a43598_38a1_7ff4_3112_0fc185129257["customRef()"]
  22b44e72_ad0a_6a98_e36a_e325291fd02b["ref.ts"]
  16a43598_38a1_7ff4_3112_0fc185129257 -->|defined in| 22b44e72_ad0a_6a98_e36a_e325291fd02b
  style 16a43598_38a1_7ff4_3112_0fc185129257 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
}