0
0
Vueframework~8 mins

Shorthand syntax (: and @) in Vue - Performance & Optimization

Choose your learning style9 modes available
Performance: Shorthand syntax (: and @)
LOW IMPACT
This affects how Vue templates compile and how event listeners and bindings are processed, impacting rendering speed and bundle size slightly.
Binding props and listening to events in Vue templates
Vue
<MyButton :title="buttonTitle" @click="handleClick" />
Shorthand syntax reduces template size and speeds up parsing and compilation.
📈 Performance GainSaves a few bytes in bundle size and reduces template parsing time
Binding props and listening to events in Vue templates
Vue
<MyButton v-bind:title="buttonTitle" v-on:click="handleClick" />
Verbose syntax increases template size and slightly slows down template parsing and compilation.
📉 Performance CostAdds negligible bundle size and minor parsing overhead
Performance Comparison
PatternTemplate SizeParsing SpeedBundle Size ImpactVerdict
Verbose syntax (v-bind, v-on)LargerSlowerSlightly larger[X] Bad
Shorthand syntax (:, @)SmallerFasterSlightly smaller[OK] Good
Rendering Pipeline
Vue compiles templates into render functions. Using shorthand syntax reduces the template string size, making compilation faster and slightly reducing memory usage during parsing.
Template Parsing
Compilation
⚠️ BottleneckTemplate Parsing
Optimization Tips
1Use : instead of v-bind to reduce template size.
2Use @ instead of v-on for event listeners to speed up parsing.
3Shorthand syntax improves developer experience with minimal runtime impact.
Performance Quiz - 3 Questions
Test your performance knowledge
What is the main performance benefit of using Vue's shorthand syntax (: and @)?
ADecreases network request count
BImproves runtime event handling speed
CReduces template size and speeds up parsing
DEliminates reflows during rendering
DevTools: Performance
How to check: Record a performance profile while loading a component with verbose vs shorthand syntax and compare parsing times.
What to look for: Look for shorter template parsing and compilation times with shorthand syntax.