Add an official utility to clone ref and reactive

[mrleblanc101]

I've stumbled upon this issue: vuejs/core#8975
The recommandation was to use toRaw to clone a ref or a reactive.

But since ref and reactive allow to compose reactive objects, toRaw still may not work for them due to how it works: https://stackoverflow.com/a/72633173/16716350

There are multiple cloning library, but shouldn't Vue ship their own utility for this ?
Since we already have multiple other utility to handle ref and reactive like https://vuejs.org/api/reactivity-utilities.html
It would be useful to add a toClone() or toCloned() utility.

I've also created an issue in vuejs/docs to document this:
vuejs/docs#3223

[mrleblanc101]

Since Vue 3 is modular, this would add any weigth.
We would have to decide if the utility only clone ref and reactive, or if it would also with with objects and deepObject

[mcv]

I absolutely think either Vue or Pinia needs to provide its own reactive-aware clone utility. There's clearly a need for cloning in order to disable reactivity, and the common advice seems to be to just use JSON stringify/parse, which does not support Dates and breaks typing. A single, official utility would provide a lot of clarity.

[muelbr]

I am having the same discussion on vueschool.io about the form pattern:
https://vueschool.io/articles/vuejs-tutorials/the-vue-form-component-pattern-robust-forms-without-the-fuss/

This pattern uses the widely (also from @yyx990803) recommended JSON.parse(JSON.stringify(obj);.
The drawback of this pattern is losing some types, especially Date which can lead to quite nasty bugs:

const foo = {name: 'John Doe', date: new Date()}
console.log(foo.date.toDateString())
const bar = JSON.parse(JSON.stringify(foo));
console.log(bar.date.toDateString()) // => fails

Creating local "raw" copies would also be helpful for partial data editors where you only want to emit the changes after a explicit save / abort action.
An official clone function would also help to clarify the (I suppose mostly vue internal used) function "toRaw" which is still a bit misleading.

My current clone helper is based on lodash.cloneDeep but it would be really nice to have something built in:

export function clone<T>(origin: Ref<T> | T): T {
    return cloneDeep(toValue(origin));
}