Vue-devtools: Component data should be updated in realtime

[rentalhost]

Currently it is updated only if some DOM is affected by data. If it is used internally it is not updated. The option here is press "refresh" all the time. My suggestion is update it if any value is changed, even if DOM is not being affected for some reason.

[posva]

Hey, can you boil down the error and provide a repro using this template?
Thanks!

[rentalhost]

@posva You can see it working here WEMRBJ.

The update1s should be ticked _each second_, while update5s should be ticked _each 5 seconds_, but only the second one is used on DOM currently.

The _vue-devtools_ should display both ticks in realtime, but it only is refreshed when update5s is updated on DOM.

Current behavior: update1s only is updated on vue-devtools when update5s is updated too.
Expected behavior: update1s should be refreshed in realtime, without wait for a DOM change being in effect.

[posva]

I see, I'll have to look if it's feasible

[phiter]

Still happening. My component has a property and you can't see the changes in real time on the devtools.

[Akryum]

It's how Vue works, if you don't use a data property anywhere in the app (I mean in reactivity-aware code like template or computed properties), it won't have any tracking dependency to avoid doing unnecessary work.

[phiter]

Yeah, I was using the property to check if a div is scrolled all the way down.

Using the property to change the div's class made the prop change in the devtools window.

I tought every property would get updated even if they're not used in the DOM.

:class="['chat-messages-body', options.atBottom ? 'atBottom' : '']"

[FEA5T]

@Akryum @posva

I have had a similar issue here for over a year: Not understanding why my computed props don't update.

When in development, vue-devtools should be considered a valid "use" of that computed property and subscribe to it.

At this point, it is a usability issue because by necessity developers write computed props before consuming them in dom. In fact, one of the best benefits of the dev-tool is that I can see the vue instance and it's computed props, data, etc and have data flow setup/validated before I write ANY dom. While I do this however, it "appears" as if I lose reactivity (making me thing there is a bug in reactivity).

This then triggers days of unnecessary debugging only to find out there is no real issue. It should be in the docs: https://github.com/vuejs/vue/issues/7672 . Also, devtools should just subscribe and show the reactive value for developer convenience and usability.

[posva]

Instead of saying _It should be in the docs_, create a pull request adding it in the documentation. I'd say that the very least one could do to give back to the project 🙂

[FEA5T]

@posva https://github.com/vuejs/vuejs.org/pull/1450

[chrisvfritz]

@posva Would it be feasible to create a little refresh button next to computed properties in the devtools, forcing them to re-evaluate?

[posva]

@chrisvfritz It already exists, it even has a shortcut added by Guillaume 🙂

[chrisvfritz]

Oh, very nice! Never noticed. 😄 Then the only other thing I can think of is maybe a tooltip over the refresh button to briefly describe that computed properties are only (re)evaluated when explicitly requested by the component (again, if it doesn't already exist - not at my computer currently).

Otherwise, this issue might be considered resolved, because I think the requested behavior of refreshing all computed properties automatically would break a lot of apps that rely on lazy evaluation, e.g. by checking if an object is defined in a v-if, then accessing nested properties on the object in a computed property if it is.

[FEA5T]

@chrisvfritz I appreciate you thinking up potential solutions here. A tooltip does not exist and would be helpful.

There is still a UX issue however where clicking refresh constantly causes a lot of friction.

Would it be possible to add a "Lazy Evaluation" switch to enable continual evaluation, this way it is up to the dev whether or not to break lazy evaluation? Also, would it break those apps, or simply make them less performant?

[chrisvfritz]

There is still a UX issue however where clicking refresh constantly causes a lot of friction.

Would it be possible to add a "Lazy Evaluation" switch to enable continual evaluation, this way it is up to the dev whether or not to break lazy evaluation?

@FEA5T I wouldn't recommend this unfortunately, as it would be very likely to cause problems that people may not even realize is related to the lazy evaluation switch. If refreshing is causing friction, my recommendation would be to temporarily add something like this in a template:

<div v-show="false">{{ myComputedProperty }}</div>

That way, myComputedProperty will always be re-evaluated, but you won't have to see it in the page.

would it break those apps, or simply make them less performant?

Both, unfortunately. 😞 It would cause some really serious performance issues in many apps and people would need a fairly in-depth knowledge of Vue to be able to troubleshoot the lazy evaluation switch as the source. They'd probably just assume it was a problem with Vue.

Many users would also start getting a lot of "can't access property X of undefined" kinds of errors, since computed properties could be evaluated in contexts where their dependencies may not even be defined yet.