A little background, my name is Vaibhav - from Five2One. I’ve been involved in VueJS for a good 2 years (since 1.0 came out) and basically helped b...
For further actions, you may consider blocking this person and/or reporting abuse
Some great tips Vaibhav! It's amazing how some of the smallest things can have a big affect on your app.
Another, which is related to
v-if, is to be careful when using it along withv-for.v-forwill takes precedence overv-ifand so if used on the same element, thev-ifwill be evaluated on every iteration. This can be useful sometimes, but if you want to conditionally load the entire element, it's best to do on an element that wraps thev-for.Vue actually documents this, though it can be easily missed: vuejs.org/v2/guide/list.html#v-for...
That is also an amazing find @james ! I didn't know that - gotta love optimisation, so many little things to look at that collectively affect the overall performance.
Just passed this comment onto my team too! Good stuff!
Good stuff 👍 Did you see Guillaume Chau's performance presentation a couple months back? If not, you're in for a treat 😀 Some really juicy stuff in there!
vuemastery.com/conferences/vueconf...
Just saw the whole thing! OMG - he's a bloody legend!
Seems pretty usefull! I would suggest to make section titles more explanatory.
I recently faced problem with v-if and v-show. I have a grid with many products and they have a little side box with severeal variants. If I would load all at the start it's too slow.
So I wanted to hide those variants and only show them when user hovers over the certain product.
With v-show it is too slow at first and with v-if the side variants render every time after mouseleave & again mouseenter so thats pretty awkward for the user.
So i came up with this idea:
Hey I'm so sorry it looks like I replied to a comment on this and not the main post.
I'll definitely update the article to make the titles more descriptive :)
That approach is pretty good as well, with vue 2.6 we have dynamic directives as well, so might be worth exploring that too :)
Amazing write up!
Thanks mate :D
v-show aint that simple. If you use v-show on a component instead of plain tag like div, it won't render it at all until the condition becomes true. That's called lazy init
really? can you demonstrate it by any news?
Thanks for posting this! I'm relatively new to the Vueniverse (coming from Emberjs) and this is super helpful
No worries at all. These are all nimble things that collectively have performance implications
Thanks for the post!
I don't see any difference between screenshots in the number one. Is second screenshot wrong?
Didn't found use for any of it