Hacker News new | past | comments | ask | show | jobs | submit login
V-memo a new directive to improve your Vue 3 app performance (zelig880.com)
34 points by zelig880 on Aug 24, 2022 | hide | past | favorite | 11 comments



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.


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.


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.


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.



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...


What about RAM usage?




Join us for AI Startup School this June 16-17 in San Francisco!

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: