Description
What problem does this feature solve?
When I first started using Vue (a long time ago :) I've liked how simple it was and the ability to debug any object value by printing it in the template using {{ object }}. I've kept this reflex when prototyping because it is so handy and often times quicker than waiting for devtools to load.
Now that we can use reactive Map/Set objects, I recently played with vue-next and reactive Maps and realized this was not working like regular objects. I wish we could do the same kind of thing.
What does the proposed API look like?
when evaluating an object in the template, vue is stringifying the object behind the scenes.
Likewise we could have an 'universal' JSON stringify replacer that handles Map and Set objects.
for instance (snippet taken somewhere on stackoverflow):
JSON.stringify(map, function replacer (key, value) {
const originalObject = this[key]
if (originalObject instanceof Map) {
return {
dataType: 'Map',
value: Array.from(originalObject.entries()) // or with spread: value: [...originalObject]
}
} else {
return value
}
}, 2))This way it could as well recursively walk through nested reactive Map/Set objects and update accordingly.
It would be a nice QoL improvement in my opinion, I dunno if it could add some overhead.
In any case I'm open to submit a PR if the idea is approved