V-memo a new directive to improve your Vue 3 app performance(zelig880.com)
zelig880.com
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
5 comments
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.
Memoization tends to work better as a manual fine-tune, when everything about how the data is created, updated and used is understood beforehand.
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.
I'm with you, I think catering to those cases is a fool's errand, but I understand the argument for doing it.
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.
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.
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) .
Memoization costs memory. Better add it where it counts. Disabling it afterwards when your app has run out of memory will be painful.
Link to the Vue docs: https://vuejs.org/api/built-in-directives.html#v-memo
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.
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...
[0] https://krausest.github.io/js-framework-benchmark/2022/table...
What about RAM usage?
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.