Skip to content- Performance
- Vue 2:
- Slower reactivity system based on
Object.defineProperty. - Not optimized for modern JavaScript engines.
- Vue 3:
- Introduced a Proxy-based reactivity system, which is faster and supports deep reactivity natively.
- Better memory usage and smaller bundle sizes.
- Composition API
- Vue 2:
- Uses the Options API exclusively.
- Organizes component logic into specific options (e.g.,
data, methods, computed, watch).
- Vue 3:
- Introduces the Composition API as an alternative to the Options API.
- Organizes logic by feature or functionality instead of grouping by type (e.g., all logic related to a form can be grouped together).
- TypeScript Support
- Vue 2:
- Basic TypeScript support.
- Type inference is limited.
- Vue 3:
- Designed with TypeScript in mind.
- Improved TypeScript support and better type inference.
- Fragments
- Vue 2:
- Requires a single root node in a component.
- Vue 3:
- Supports fragments, allowing components to return multiple root nodes.
- Custom Directives
- Vue 2:
- Defines custom directives using
bind, update, and other hooks.
- Vue 3:
- Simplifies custom directives by using a single
mounted and updated hook.
- Suspense
- Vue 2:
- No built-in feature for handling asynchronous components.
- Vue 3:
- Introduces the
<Suspense> component for better handling of async components, such as loading indicators or fallback UI.
- Improved Reactivity
- Vue 2:
- Limited reactivity with arrays and objects (e.g., adding new properties is not reactive).
- Vue 3:
- Fully reactive with
Proxy. - Provides
reactive() and ref() helpers for fine-grained reactivity.
- Codebase Modernization
- Vue 2:
- Written in ES5 with polyfills for compatibility.
- Vue 3:
- Rewritten in TypeScript, making it easier to maintain and extend.
