129: Evan You - What's Coming in Vue.js 3.0

November 27, 2019

78 min episode · 2 min read

Evan You

Episode

78 min

Read time

2 min

AI-Generated Summary

Published Dec 25, 2025

Key Takeaways

✓Template Performance Optimization: Vue 3 compiler partitions templates using structural directives like v-if and v-for as boundaries, tracking only dynamic nodes within static blocks. This eliminates unnecessary tree walking during updates, achieving 120% faster reconciliation than Vue 2 and outperforming most competing frameworks in benchmarks.
✓Composition API Design: The setup function runs once per component instance, automatically collecting dependencies without manual tracking. Unlike React hooks, this eliminates stale closure bugs, removes ordering restrictions, and allows conditional logic. Functions like reactive, ref, watch, and computed expose Vue internals as importable utilities.
✓Tree-Shaking Architecture: The new compiler imports features on-demand, loading v-model or transition code only when templates use them. Minimal Vue 3 applications compress to 10 kilobytes gzipped, less than half Vue 2's size, while maintaining full functionality through modular package design.
✓Migration Strategy: Vue 3 provides compatibility builds with runtime warnings for deprecated syntax, automatic code mods for straightforward changes, and allows mixing Composition API with Options API. Only one or two breaking changes require manual upgrades, with most components working unchanged if using standard template syntax.
✓Reactive State Management: The reactive function creates observable objects without component instances, while provide and inject enable typed dependency injection. Developers can build application-wide stores by instantiating classes, wrapping them with reactive, and injecting anywhere, creating lightweight Vuex alternatives without external libraries.

What It Covers

Evan You discusses Vue.js 3.0's complete rewrite, including performance improvements through template optimization, the new Composition API for better code organization, TypeScript migration, and maintaining backward compatibility while delivering significant architectural changes.

Key Questions Answered

•Template Performance Optimization: Vue 3 compiler partitions templates using structural directives like v-if and v-for as boundaries, tracking only dynamic nodes within static blocks. This eliminates unnecessary tree walking during updates, achieving 120% faster reconciliation than Vue 2 and outperforming most competing frameworks in benchmarks.
•Composition API Design: The setup function runs once per component instance, automatically collecting dependencies without manual tracking. Unlike React hooks, this eliminates stale closure bugs, removes ordering restrictions, and allows conditional logic. Functions like reactive, ref, watch, and computed expose Vue internals as importable utilities.
•Tree-Shaking Architecture: The new compiler imports features on-demand, loading v-model or transition code only when templates use them. Minimal Vue 3 applications compress to 10 kilobytes gzipped, less than half Vue 2's size, while maintaining full functionality through modular package design.
•Migration Strategy: Vue 3 provides compatibility builds with runtime warnings for deprecated syntax, automatic code mods for straightforward changes, and allows mixing Composition API with Options API. Only one or two breaking changes require manual upgrades, with most components working unchanged if using standard template syntax.
•Reactive State Management: The reactive function creates observable objects without component instances, while provide and inject enable typed dependency injection. Developers can build application-wide stores by instantiating classes, wrapping them with reactive, and injecting anywhere, creating lightweight Vuex alternatives without external libraries.

Notable Moment

You discovered that Vue 3 templates achieve performance advantages impossible with render functions or JSX because the compiler extracts structural information from constrained syntax, enabling optimizations that must bail out when analyzing dynamic JavaScript expressions in less constrained formats.

Know someone who'd find this useful?