⬅️ Back to Table of Contents

📄 useCloned

📊 Analysis Summary

Metric	Count
🔧 Functions	3
📦 Imports	8
🟢 Vue Composition API	2
📐 Interfaces	2
📑 Type Aliases	1

📚 Table of Contents

• Imports
• Vue Composition API
• Functions
• Interfaces
• Type Aliases

🛠️ File Location:

📂 packages/core/useCloned/index.ts

📦 Imports

Name	Source
MaybeRefOrGetter	vue
Ref	vue
WatchOptions	vue
deepRef	vue
isRef	vue
shallowRef	vue
toValue	vue
watch	vue

---

Vue Composition API

Name	Type	Reactive Variables	Composables
watch	watch	none	none
watch	watch	none	none

---

Functions

cloneFnJSON(source: T): T

Parameters:

• source T

Returns: T

Calls:

• JSON.parse
• JSON.stringify

Code

export function cloneFnJSON<T>(source: T): T {
  return JSON.parse(JSON.stringify(source))
}

useCloned(source: MaybeRefOrGetter<T>, options: UseClonedOptions<T>): UseClonedReturn<T>

Parameters:

• source MaybeRefOrGetter<T>
• options UseClonedOptions<T>

Returns: UseClonedReturn<T>

Calls:

• deepRef (from vue)
• shallowRef (from vue)
• watch (from vue)
• clone
• toValue (from vue)
• isRef (from vue)
• sync

Internal Comments:

// watch options (x2)

Code

export function useCloned<T>(
  source: MaybeRefOrGetter<T>,
  options: UseClonedOptions<T> = {},
): UseClonedReturn<T> {
  const cloned = deepRef({} as T) as Ref<T>
  const isModified = shallowRef<boolean>(false)
  let _lastSync = false

  const {
    manual,
    clone = cloneFnJSON,
    // watch options
    deep = true,
    immediate = true,
  } = options

  watch(cloned, () => {
    if (_lastSync) {
      _lastSync = false
      return
    }
    isModified.value = true
  }, {
    deep: true,
    flush: 'sync',
  })

  function sync() {
    _lastSync = true
    isModified.value = false

    cloned.value = clone(toValue(source))
  }

  if (!manual && (isRef(source) || typeof source === 'function')) {
    watch(source, sync, {
      ...options,
      deep,
      immediate,
    })
  }
  else {
    sync()
  }

  return { cloned, isModified, sync }
}

Internal helpers

Declared inside another function in this file.

sync(): void

Returns: void

Calls:

• clone
• toValue (from vue)

Code

function sync() {
    _lastSync = true
    isModified.value = false

    cloned.value = clone(toValue(source))
  }

---

Interfaces

UseClonedOptions<T = any>

Interface Code

export interface UseClonedOptions<T = any> extends WatchOptions {
  /**
   * Custom clone function.
   *
   * By default, it use `JSON.parse(JSON.stringify(value))` to clone.
   */
  clone?: (source: T) => T

  /**
   * Manually sync the ref
   *
   * @default false
   */
  manual?: boolean
}

Properties

Name	Type	Optional	Description
clone	(source: T) => T	✓	not shown
manual	boolean	✓	not shown

UseClonedReturn<T>

Interface Code

export interface UseClonedReturn<T> {
  /**
   * Cloned ref
   */
  cloned: Ref<T>
  /**
   * Ref indicates whether the cloned data is modified
   */
  isModified: Ref<boolean>
  /**
   * Sync cloned data with source manually
   */
  sync: () => void
}

Properties

Name	Type	Optional	Description
cloned	Ref<T>	✗	not shown
isModified	Ref<boolean>	✗	not shown
sync	() => void	✗	not shown

---

Type Aliases

CloneFn<F, T = F>

type CloneFn<F, T = F> = (x: F) => T;

---

Generated by Syntax Scribe