Method invoked on created/mounted or computed for non changing data?

Hello everyone,

since I started using Vue I have been always wondering about performance differences between two approaches to preprocessing data that will never change during component lifecycle. Let’s say we have a component that receives array of items with slugs as prop that next we use to retain translation keys and then get translations to display in a list (could be i18n keys and translations in real world app). We know that value of the prop never changes so recalculations will never be required. What would you choose for that case: invoke method on component init or computed?

Codesandbox - method invoked on mounted
Codesandbox - computed

For me computed is much more readable, but for some reason I feel like it is consuming more memory (I might be wrong as it is only my feelings) and in that case we are not benefiting from caching. On the other hand readability is worse with method and component has more lines. Will there be any differences in performance?

Both methods are more or less the same. In simplified terms, computed’s are basically just methods that return cached data. I wouldn’t be worried about performance. If there is any difference it would be negligible. Perf is one of those things you really shouldn’t worry about until it’s necessary - e.g. if you’re processing tens of thousands of objects.

For this use case I’d go with the computed. IMO it’s a better DX.