V-memo a new directive to improve your Vue 3 app performance

https://zelig880.com/introducing-v-memo-a-new-directive-to-improve-your-vue-3-app-performance

by zelig880 • 4 years ago

34 11 4 years ago

zelig880• 4 years ago

Vue 3.2 offers a new directive called v-memo. This directive can be used to improve the performance of your application by managing DOM tree updates.

clementmas2• 4 years ago

That kind of performance optimization should be applied automatically. It's a welcomed addition for advanced developers but it should be the machine's job.

I think frameworks like SolidJS or Svelte are one step ahead in that regards. As far as I understand, they can surgically update the DOM without having to re-render the whole component. I wonder if Vue 4 will still use a Virtual DOM.

spartanatreyu• 4 years ago

Just piping everything through a memo function can end up with worse performance than before.

Memoization tends to work better as a manual fine-tune, when everything about how the data is created, updated and used is understood beforehand.

nexuist• 4 years ago

If the machine could do it you wouldn't need to use a directive for it. It's not like Vue is doing no optimization at all behind the scenes; there's just only so much you can do that will still allow the developer to maintain 100% confidence in the framework.

brundolf• 4 years ago

Speaking from a React perspective at least, I think it's not the default because technically nothing stops someone from writing really smelly, non-idiomatic code where memoizing it could cause logic errors. At the very least it would be a breaking API change

I'm with you, I think catering to those cases is a fool's errand, but I understand the argument for doing it.

tgv• 4 years ago

Memoization costs memory. Better add it where it counts. Disabling it afterwards when your app has run out of memory will be painful.

cypressious• 4 years ago

That's exactly what Vue does (unlike say React). Only those parts of the VDOM are updated whose dependencies changed. v-memo is mostly for lists and cases where updates should be delayed for reasons like flickering.

rk062• 4 years ago

Vue already tracks dependencies. V-memo is a special case where they want to react to values which are determined by user, instead of all react values used(default for Vue) .

clementmas2• 4 years ago

Link to the Vue docs: https://vuejs.org/api/built-in-directives.html#v-memo

rk062• 4 years ago

This optimization moved Vue from "faster than react" to "faster than svte" level in js framework benchmarks[0]

[0] https://krausest.github.io/js-framework-benchmark/2022/table...

bromuro• 4 years ago

What about RAM usage?

V-memo a new directive to improve your Vue 3 app performance

Related Stories