vuejs / devtools

⚙️ Browser devtools extension for debugging Vue.js applications.
https://devtools.vuejs.org/
MIT License
1.7k stars 122 forks source link

Feature request: Show type of reactivity for values in component state #615

Closed waruyama closed 1 month ago

waruyama commented 2 months ago

I would like to see the type of reactivity ("raw", "reactive", "ref", "shallowRef", "shallowReactive") for each value in the component's state.

Up to version 6 this way somewhat implemented, where a shallowRef was displayed as "Object", but a reactive object was labeled "Reactive".

Here is a comparison between v6 and v7:

image

Unless I am missing something, information about the type of reactivity is no longer available. This is unfortunate, because the fine grained reactivity types are a really strong feature of Vue. Knowing the reactivity type is very helpful for me, because it helps me prevent making deeply nested objects reactive by accident.

An alternative to displaying the reactivity type in the label I could also imagine that a little icon next to "Object" would indicate the type of reactivity.