[Feature] useReactives

I have an idea to make a helper function similiar to toRefs named toReactives which gets a ref object and decomposes it into a normal object which every key is a reactive instead of a ref.

I wanted to make this mainly for decomposing props because right now we only have toRefs to do this and this forces us to have a .value every time we want to reference props in code.

My idea was that since reactive() deeply unwraps refs, such implementations would work.

function toReactives(refObject) {

  const result = {};

  for (const key of Object.keys(refObject)) {
    result[key] = reactive(toRef(refObject, key));
  }

  return result;

};

function toReactives(refObject) {

  const result = {};

  for (const key of Object.keys(refObject)) {
    result[key] = reactive(computed(() => refObject[key]));
  }

  return result;

};

function toReactives(refObject) {

  const result = {};
  const refs = toRefs(refObject);

  for (const key of Object.keys(refs)) {
    result[key] = reactive(refs[key]);
  }

  return result;

};

but neither works, refs are not unwrapped in any of these. i am ok to submit a PR if i be able to fix this.

[antfu]

1. No, it’s a limitation of reactive / JS itself
2. No, proxy only work on object. You will get a runtime error if you try that.
3. Take a look at vue-global-api’s dist, you will find how to define your custom global apis. vue-global-api will only include vue’s composition-api itself for now

[antfu]

close by #671