Proper replacement method for "reactive"

[tsiotska]

Summary

The request is to add new non-enumerable method .replace() on reactive to update object via native api.

Motivation

It's well known and not documented that in case we want to fully update (replace) object in reactive, we must use:

Object.keys(reactiveObject).forEach(key => delete reactiveObject[key])
Object.assign(reactiveObject, { data: T })

We could avoid "Object.assign" if manually wrapping our data object in some kind of { value: { ...data } }.
Thus, reactiveObject.value can be safely replaced.

Or as suggested in article below we can use deepAssign recursive function.

Related information

Also, VueUse provides utilities such as useReactive (a shorthand for creating reactive objects) and reactivePick or reactiveOmit for deriving new reactive objects based on existing ones. However, these utilities don’t directly replace the entire reactive object - they create or return new reactive instances.

Basic example

<script setup>
  import { reactive } from 'vue'
  const formData = reactive({ firstFormData: 'firstFormData' })
  formData.replace({ secondFormData: 'secondFormData' })
</script>

Detailed design

Treat this as merely implementation idea/example:

Object.defineProperty(reactiveObj, 'replace', {
  value: function (newData) {
    Object.keys(this).forEach(key => delete this[key])
    Object.assign(this, newData) // To be reconsidered with more efficient approach
  },
  enumerable: false,
})

Drawbacks

Method attachment can lead to unexpected bugs.
We should assure that the reactive object will still behave as expected, and "replace" won’t interfere with Vue’s reactivity tracking.

[jods4]

(1) I think the idiomatic way to have an instance that you can reactively swap out for another is to put it in a ref. It should also be more performant, by far:

const formData = ref({ firstFormData: 'firstFormData' })
formData.value = { secondFormData: 'secondFormData' }

(2) It is a bad practice to define new properties on objects you don't control.
If this was added to vue, it should be a replaceObject method that is exported by module, not added to all instances.

(3) The implementation has edge cases that won't work. This is ok in a project codebase but not in a general lib like Vue. For example, if I have added a property to my object as non-configurable, the delete statement will throw.

To me, it feels like this belongs to a replaceObject method in your project or as a userland npm package, not to Vue core.

[posva]

This ☝️
You should use a ref and you can also add this property to your own project if you want, create your own replaceableObject() equivalent of reactive

[tsiotska]

Thank you @jod4 @posva,

While opting for ref over reactive may require more granular updates (in cases we update nested objects), if someone still needs to use reactive, here's a way to handle the whole 'replacement':

const formDataWithDefault = reactive({ 
  value: {
    person: {
      nested: {
        fullname: "John Doe"
      }
    },
    debt: {
      currency: "euro",
      amount: 2
   }
  }
});

apiData((newFormData) => {
  formDataWithDefault.value = newFormData;
});