ref to ref

[softwareCobbler]

Occasionally I want to form a ref to a ref. Ref unwrapping prevents this:

r = ref(ref(42))
r.value // 42 :(
r.value.value // undefined :(

but assigning a ref after initialization has led me to a pattern that does seem to work:

const r = ref()
r.value = ref(42)
r.value // Ref
r.value.value // 42

Are there any gotchas with the latter case? It seems to work as I had hoped, but also seems to conflict with the docs:

This also means if the [assigned] object contains nested refs, they will be deeply unwrapped.

where maybe the above documentation only applies to "during the initial call to ref()"

[Shyam-Chen]

unref: https://vuejs.org/api/reactivity-utilities.html#unref

[Alfred-Skyblue]

When you pass a Ref object to ref, it returns the object itself instead of creating a new ref. So, your code actually runs as follows:

const obj = ref({ a: 1 })

const r = ref(obj)

console.log(obj === r) // true

core/packages/reactivity/src/ref.ts

Lines 127 to 132 in 1c525f7

	function createRef(rawValue: unknown, shallow: boolean) {
	if (isRef(rawValue)) {
	return rawValue
	}
	return new RefImpl(rawValue, shallow)
	}

However, when you assign a value to ref, you do not unpack the ref. This allows you to perform nested ref assignments：

core/packages/reactivity/src/ref.ts

Lines 154 to 164 in 1c525f7

	set value(newVal) {
	const useDirectValue =
	this.__v_isShallow || isShallow(newVal) || isReadonly(newVal)
	newVal = useDirectValue ? newVal : toRaw(newVal)
	if (hasChanged(newVal, this._rawValue)) {
	this._rawValue = newVal
	this._value = useDirectValue ? newVal : toReactive(newVal)
	triggerRefValue(this, newVal)
	}
	}
	}